enrico2016

Hi rcsmit, you can try to retype “@” or copy-paste it in your custom css section (I wouldn’t touch the native css of the theme).
Unfortunately, I’m not so familiar with css coding to be really able to help you. In my site those lines seem to work, but I didn’t test it with a tablet. You would change “480 px” into something bigger: give a try with “768px”. Please let me know if that works also on my site: https://www.griecopelino.com.
We’re experiencing the same issue, that is maintaing image ratio when resizing, so let’s join forces, hoping that somebody from WP will suggest a better fix.

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.

Hi,

I’ve got exactly the same problem with my mobile native browser (Samsung Edge S7). I found out that changing a couple of CSS parameters makes the header image display correctly. The problem is that I’m no coder, so my solution is just a temporary one and I do hope somebody more expert will fix the issue better.
Basically, this is the code I added in the CSS menu (please change the max-width to fit your tablet):

@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;
}
}

Basically, I’ve changed position in “absolute” and height in “100%”. I’ve also added “object-fit: cover”. I hope it’ll work also for you and somebody more familiar than me with coding could give some additional help.