Header twenty seventeen responsive (mobiel vriendelijk) CSS

boekmarketing-boekpromotie-verkoop-je-boek

Twenty Seventeen is een populair WordPress theme. Dagelijks wordt Twenty Seventeen vele duizenden keren gedownload. Ook ik maak er vaak gebruik van, het is gratis en je kunt er best mooie websites van maken. Vaak maak ik website voor auteurs. Zo kunnen ze relatief goedkoop hun boek online promoten.

Toch heeft Twenty Seventeen ook z’n beperkingen. Je moet wel iets van CSS weten om je website goed presenteren, zeker mobiel. En dit laatste is zeer belangrijk, omdat veel mensen mobiel zoeken en bestellen. De header foto van Twentye Seventeen wordt niet automatisch goed getoond om een mobiel apparaat. En dat is natuurlijk niet wat jij wilt.

CSS voor responsive header Twenty Seventeen

Gelukkig is er binnen CSS een oplossing om jouw Twenty Seventeen header responsive te maken. Met de onderstaande CSS wordt de header correct getoond op je mobiel:

.custom-header {
height: 710px ;
}

@media screen and (max-width: 450px) {

.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: auto;
left: 0;
max-width: 100%;
min-height: 0;
-o-object-fit: unset;
object-fit: unset;
position: relative;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
transform: none;
}
}

.custom-header,
.has-header-image.twentyseventeen-front-page .custom-header {
height: 710px;
}

@media only screen and (max-width:768px) {
.custom-header,
.has-header-image.twentyseventeen-front-page .custom-header {
height: 400px;
}
}

@media only screen and (max-width:480px) {
.custom-header,
.has-header-image.twentyseventeen-front-page .custom-header {
height: 200px;
}
}
.custom-header-media:before {
display: none;
}

 

Je kan deze CSS code knippen en plakken en vervolgens via de opties ‘Weergave’ en ‘Customizer’ plaatsen onder Extra CSS.

 

Het eindresultaat is een header van Twenty Seventeen welke volledig responsive is en correct wordt getoond op de mobiele telefoon!

Twenty Seventeen responsive header mobile