Help with Responsive Header
-
Hi,
I’m using the Argent theme. My header image is responsive on desktop and tablet but it cuts off on the mobile version. Any tips to get the image not to cut off when displayed on a mobile device?
The blog I need help with is: (visible only to logged in users)
-
Hi there,
Since your site has not launched yet, I’m am unable to see the site on the mobile version. This is what I am currently seeing:
Once you launch your site, please let me know – I would be happy to take look. Thanks!
-
Hi so sorry I’m just getting back to you. My site is launched. Are you able to take a look still?
-
Here’s what I see on an iPhone 11 Pro running iOS 13.5.1: https://d.pr/i/SdhH1l
What type of phone are you using?
-
-
Ok, would you please use https://snipboard.io/ to share a screenshot of what you’re seeing?
-
https://snipboard.io/Ino6Te.jpg : all other pages
https://snipboard.io/crD4YU.jpg : homepage -
-
Those screenshots are with using Google Chrome. Here are Safari screenshots
Home: https://snipboard.io/mZjYVw.jpg
Other pages: https://snipboard.io/NCzTEH.jpg -
Hi there,
This is normal.
Almost all themes handle custom headers the same way – the image gets center-cropped, depending on the size of the screen you’re viewing it on, and that’s all that is happening here. For this reason it’s generally recommended that images used as custom headers should not contain important information, but should rather function more as a neutral background.
The reason it’s different between your front page and other pages is because this theme displays the custom header image with a lower height on on the front page than on other pages.
With your particular header image, that has very low height while it’s very wide, that works out great on the front page, though only on some devices: in the Customizer mobile view it’s being cut off on the front page as well, and the same thing happens on mobile phones with narrower screens than your iPhone.
The moment you load a different page where the image has to be displayed a bit taller, by necessity it also has to be cropped on the sides. If that didn’t happen you’d either sit with two blank strips above and below the image, or the image would need to be squashed horizontally to force it to fit into the reduced space, and neither of those options look good.
You can try adding this CSS in the Customizer:
/* Force header image to display in full on mobile */ @media screen and (max-width: 600px) { .site-branding { background-size: contain; padding: 30px !important; } }This forces the full image to display, in other words, it makes the header image non-responsive on mobile, but due to the dimensions of the image it used it means it displays very small. It then further forces the header image area to be smaller so it doesn’t show empty space above and below.
-
- The topic ‘Help with Responsive Header’ is closed to new replies.
WordPress.com Forums 
