My website not match with mobile

Only my website homepage have problem, when I use my pc to view, everything look perfect. But when I use my iphone some picture is and background color back to white. How I can fix this.

  • Predrag Dubajic
    • Support

    Hi Easy,

    Hope all is well :slight_smile:

    It seems there's some additional CSS loaded on mobile phones that's causing this.

    Image size is being affected so it fits in the full width of the phone, so there's not enough image to cover everything else below it.
    I managed to pinpoint the issue to this CSS code:

    .mobile-true .stripe, .mobile-true .fancy-parallax-bg, .mobile-true .page-title-parallax-bg {
        background-attachment: scroll !important;
        background-size: auto!important;
    }

    It's the background-size: auto!important; attribute that's causing the issue.
    I would suggest finding where this code is coming from in your files or custom CSS and then either remove that line or make it specific to larger screens only with some media query.

    And below, one part is missing background color and it's caused by this CSS code:

    .stripe-style-5 {
        background-color: #ffffff;
        background-repeat: ;
        background-attachment: fixed;
        background-position: center top;
        background-size: cover;
    }

    Background color is set there to white with this attribute background-color: #ffffff;.
    Again, you could use some media queries to apply additional background on smaller screens but I would suggest first checking why this code is being changed like this on smaller screens.

    Have you tried disabling autooptimize and Hummingbird asset optimization to see if the styling issues are gone after that?

    Best regards,
    Predrag

  • Predrag Dubajic
    • Support

    Hi Easy,

    Now that site optimization is turned off I could see some more info about that CSS code.
    It's coming from the theme files so removing them or modifying them directly is not an option here.

    We should be able to overwrite them tho with CSS like this:

    .home .mobile-true .stripe-parallax-bg {
        background-size: cover!important;
    }
    
    .home #services {
        background-color: #2e3031!important;
    }

    Adding this to Theme Options > General > Custom CSS field should do the trick even with optimization enabled.

    Let us know how it goes.

    Best regards,
    Predrag

  • Predrag Dubajic
    • Support

    Hi Easy,

    I just checked your site on mobile and it shows fine for me now, the backgrounds are there, can you try clearing your browser cache on phone and give it another try?

    If the issue is still there after that could you grab another screenshot on your phone so I can see how it looks for you?

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.