[Support request] Make background images keep size on mobile/tablet

[Dylan]

Dear community,

I have this one website I ported over from another awful broken theme.
Now I want the right corner background images to not become so awfully big when going into the responsive mode (tablet/mobile).
GeneratePress makes them extremely large and it makes the text sometimes unreadable.

There is also extra spacing on the right when of the page when I enter on my mobile.

Can somebody help me out what is going wrong?

Regards.

[Leo]

Hi there,

Not sure if I fully understand.

Is there a specific page I should be looking at in the site you linked?

Let me know 🙂

[Dylan]

On those blocks of content theres this white/grey background blocks with a background image that’s blue-ish with a image like the bottle of pills. That image resizes extremely big when I make the screen smaller. I want them to stay normal size or at least not so big.

[David]

Hi there,

GP doesn’t have any control on how CSS background images are displayed, you would need to specify a background size in your CSS eg.

#background-image-corner,
#launch,
#partners,
#supporting-industry-change,
#market-validation,
#safety-net,
#regulatory-change,
#who-mediconnect {
    background-position: bottom right !important;
    background-size: 60% !important; /* Add this line */
}

[Dylan]

Thanks so much. Any idea why there is a scroll bar from left to right in the mobile version of my site?

[David]

That happens when an element is sized larger then the viewport.
Can happen because of fixed width elements, padding on elements or use of negative margins. Need to isolate which elements are causing it and correct them.

I think it is a combination of padding inside elements and your neg margin CSS as this CSS would normally cure just a padding problem, but it doesn’t:

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

[Author]

Posts