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

Home Forums Support Make background images keep size on mobile/tablet

  • This topic has 5 replies, 3 voices, and was last updated 11 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1040541
    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.

    #1040682
    Leo
    Staff
    Customer Support

    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 🙂

    #1041028
    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.

    #1041133
    David
    Staff
    Customer Support

    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 */
    }
    #1041573
    Dylan

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

    #1041592
    David
    Staff
    Customer Support

    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;
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.