Ti basta solo inserire all’interno della compilazione dei CSS nel tema (percorso: Aspetto -> Personalizza -> CSS Aggiuntivo) il codice riportato di seguito!
Cercando e ricercando in rete sono riuscito a trovare il codice da inserire nel campo “Custom CSS” nella personalizzazione del tema.
Ecco il codice!
^^^^^^^^^^^^^^^^^^^^^^
.has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe, .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
height: 75% !important;
object-fit: fill !important;
width: 66%;
max-height: 80% !important;
display: block !important;
position: relative !important;
}
.custom-header-media {
height: 60vw !important;
}
#wp-custom-header {
height: 100% !important;
}
.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media, .admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media, .admin-bar.home.blog.has-header-image .custom-header-media, .admin-bar.home.blog.has-header-video .custom-header-media {
height: calc(71vh – 32px) !important;
}
^^^^^^^^^^^^^^^^^^^^^^
PRO:
Problema risolto ed immagine di sfondo del tema Twenty Seventeen è perfettamente adattata al dispositivo mobile.
CONTRO:
Con questo codice alcune parti del sito “non cliccabili” se aperte da un browser per personal computer. NON PREOCCUPATEVI! Il codice che ho inserito minimizza al massimo l’area “non cliccabile”.
