Hello, There are several issues in this forum about this, also one of mine. I tried all the offered solutions en nothing works, ego the Problem is even worse now in the smartphones vertical position.
Hi,
try to add the following CSS code:
@media screen and (max-width: 480px) {
.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe {
position: absolute;
height: 100%;
left: 50%;
max-width: 1000%;
min-height: 100%;
min-width: 100%;
min-width: 100vw;
width: auto;
top: 50%;
padding-bottom: 1px;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
object-fit: cover !important;
}
}
@media screen and (max-width: 480px) {
.has-header-image.twentyseventeen-front-page .custom-header {
/*display: table;*/
height: 265px;
/*height: 75vh;*/
height: 55vh;
/*width: 100%;*/
}
}
This is a solution I’ve found on my own, because I had got the same issue. It’s not ideal, but as far as I’ve tested it, it kind of works. I do hope somebody more familiar than me with CSS will come up with a better fix.
thanks, that code seems to help on one of my sites. I’ll go try it on another. Hopefully a new version will fix it eventually.
