Mobile Header Cropping on Tablet When It is Vertical

Where did you find that solution?

I found those on this forum, actually.

Yes, but which thread? I gave many solutions like that and I need to know which is the one that doesn’t work.

I found this information on 3 different posts, one of which was this:
https://www.ads-software.com/support/topic/mobile-header-image-sizing/

To be honest, I have spent so many hours going through posts looking for an answer that I can’t recall which ones the other 2 came from.

If there is one piece of code that would replace all the stuff I have, I can easily remove what’s there and replace it.

On a related note, I also want to disable the header on the inside pages – maybe you could give me a link to that answer, too.

I think this is one of the others
https://www.ads-software.com/support/topic/image-header-size-on-mobile/

Try this.

In the “Additional CSS” section of the dashboard add this:

@media screen and (max-width: 768px) {
    .custom-header-media,
    .has-header-image .custom-header-media img {
        display: block;
        position: static;
    }

    .has-header-image.home.blog .custom-header {
        height: auto;
    }

    .has-header-image.home.blog .site-branding {
        left: 0;
        position: absolute;
        top: 0;
    }
}

https://codex.www.ads-software.com/CSS#Custom_CSS_in_WordPress

• This reply was modified 6 years, 8 months ago by Andrew Nevins.

Should this replace what is there? Or do I add it?

In addition of what you already have

Thanks.

Well, it looks fine still on the iPhone, but when the tablet is in vertical position, the header is still cropped on left and right. Oddly, the header looks a little better on the inside pages, but it is still cropped.

There’s something else wrong on your site that I think is causing that. On iPad portrait you can horizontally scroll can’t you? That should never happen.

No, not in portrait setting.

Can you clear your browser’s cache and check again? I can scroll on your site and there are some CSS errors causing havoc on your site.

Check out this ‘Diffchecker’ tool, I made a difference between the theme’s original ‘style.css’ file (left) and your theme’s ‘style.css’ file (right): https://www.diffchecker.com/XUS4dOdo

You shouldn’t modify the theme’s files because it causes maintenance issues. Instead use the “Additional CSS” part of the dashboard.

Look on line #547 of your theme’s style.css file. It’s broken. That’s not CSS syntax.

Revert the theme’s style.css file to the original code: https://themes.svn.www.ads-software.com/twentyseventeen/1.4/style.css

Thank you Andrew, we will try that, but I did not make any changes to the theme code, I only used the Additional CSS section. Hopefully this will work, thanks!