Background image cut out on mobile

  • Resolved georgemartinez

    (@georgemartinez)


    1 year, 12 months ago

    I’m having trouble with the homepage background images on my website. They look alright on desktop but on mobile devices the width is cut out.

    I’ve looked into the media queries css but I don’t want to change anything just in case I mess up, I’m new in all this. I don’t even know if I’m looking into the right css sheet.

    The media queries section has more code, this is at the bottom. I guess it’s the one regarding mobile devices:

    `@media only screen and (max-width: 480px) {

    .footer-widgets .widget-title,
    .home-even .widget-title,
    .home-odd .widget-title {
    font-size: 36px;
    font-size: 3.6rem;
    }

    .home-even,
    .home-odd {
    font-size: 22px;
    font-size: 2.2rem;
    }
    }
    #header .header-left {
    float: left;
    width: 30%;
    }

    #header {
    padding-top: 30px;
    }

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

Viewing 5 replies - 1 through 5 (of 5 total)

  • following as I have a similar issue. Site looks fine on computer, but image is terrible on mobile & tablet.

    lisa

    (@contentiskey)

    You can out test the desired CSS changes in the ADDITONAL CSS area of the Customizer — and if it doesn’t look nice remove the changes without hurting your site.

    Sometimes background images and media queries take a bit of testing to get right for small device view.

    I see your theme seems to be from StudioPress. Ask the StudioPress support team for guidance about the background image CSS – they would be most familiar with the theme.
    https://my.studiopress.com/wp-login.php.

    Two things, your current background image looks like its repeating on the right side on desktop view. I would suggest adding the following CSS to cover the full width:

    .home-section-1 {
background-size: cover;
}

    For mobile, there is not a way to make the image show full width without it repeating due to its height. I would suggest playing with the position of the image so that the guitarist looks somewhat centered by adding:

    @media only screen and (max-width: 480px) {
.home-section-1 {
background-position: 20% 0px!important;
}
}
    Thread Starter georgemartinez

    (@georgemartinez)

    Thanks everyone for your advice!
    Code never seemed to work on the additional css area @contentiskey , this time it did!

    @abretado1985 your code solved everything. I duplicated the last paragraph for every home section of my landing page, and I could successfully adjust the background images on mobile by changing the values.

    @cleasterwood if it helps, on the last line of code; just change the % to move the image right or left and change the px number to move the image up or down. Negative values can be used

    background-position: 20% 0px!important;}
}
Example:
background-position: 70% -150px!important;}
}

    Great! @georgemartinez

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Background image cut out on mobile’ is closed to new replies.