• Resolved jronline1

    (@jronline1)


    I’m trying to change the sizing of my header background image for mobile view. (It’s not really the “header” but a background image for a row containing a cta button…)

    I’ve tried different plug-ins & css to help, checked and tested every setting, but I’m not having any luck.
    I’ve found others asking for help with similar issues, but those solutions haven’t produced the desired results either.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor Nicole Paschen Caylor

    (@bgnicolepaschen)

    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

    Thread Starter jronline1

    (@jronline1)

    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.

    Plugin Support Jesse Owens

    (@jessecowens)

    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.

    Plugin Support Jesse Owens

    (@jessecowens)

    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:

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘changing header image size for mobile’ is closed to new replies.