changing header image size for mobile

Hello,

Thanks for contacting us, sorry you’re having issues with the background image on your site. The background image is set from the Customizer, and only part of the image will show on mobile. We recommend changing the background setting to “Cover” in the Customizer to see if that produces the desired results.

I also noticed the actual header seems taller than it needs to be, and I see there’s some invisible text in there. We wanted to let you know Google does not recommend doing this – https://developers.google.com/search/docs/advanced/guidelines/hidden-text-links

Please let me know how else we can help!

Thanks,
Nicole

Setting the background to “cover” has the complete opposite effect I want for the mobile view of the website. When set to “cover,” the image is so zoomed in… that there are no details of it being an image at all…

As far as invisible text, I’m not sure what you would be referring to.

Hi @jronline1 –

Thanks for the updates, I’m sorry to hear you’re still having trouble. I took another look at your site, and also replied to your post on the boldgrid.com support forums. Here’s that reply:

It looks like most of the issues are being caused by some strange negative margins on some of your blocks. I can’t say for sure how these happened, but here’s how you can fix it.

Each one of your blocks that has the negative margins are using the value margin-left: -250px;. Edit your homepage, and switch over to the Text editor tab.

Then use the shortcut Ctrl-F (Cmd-F on a Mac) to search for -250px and use those highlighted sections to locate all of the affected blocks. Once you find those, replace all the negative values with 0px.

That should resolve the issues both with your background image, as well as the “heading” images on the page.

Hi @jronline1 –

We resolved this issue over on the BoldGrid Support forums, I’m just wrapping up here.

For anyone else finding this message, here’s how we resolved this issue: