[Resolved] Section background images not responsive on mobile

Home Forums Support Section background images not responsive on mobile

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1295109
    Elzanne

    Good day,

    I am experiencing that the section background images on my homepage are not responding on my actual mobile.

    I have used the following css:

    .enable-parallax {
    background-position: center center !important;
    background-attachment: fixed;}

    In the appearance customizer, it appears and responds perfectly when I preview it on the mobile view, but it does not do the same on my actual cellphone.

    I am not sure what is causing this.

    Please advise.

    Thank you.

    #1295122
    David
    Staff
    Customer Support

    Hi there,

    this background-attachment: fixed; will not work on Mobile devices. The device disables it as its really processor intensive.

    You can add that CSS inside a desktop media query for desktop only.

    #1296358
    Elzanne

    Thank you very much David! 🙂

    #1296508
    David
    Staff
    Customer Support
    #1300030
    Elzanne

    Hi David,

    Sorry to bother again.

    I got the section background images to be responsive in mobile view, thank you, but I came to realize that everything else is now not responsive in mobile view: letter-spacing, slider padding, colors, text-transform.

    I am not sure what is causing this?

    #1300303
    David
    Staff
    Customer Support

    The Slider Padding use this CSS:

    @media (max-width: 768px) {
        .generate-sections-container.slider .generate-sections-inside-container {
            padding-left: 0;
            padding-right: 0;
        }
    }

    For the font sizes – you can set desktop and mobile sizes for H2 in Customizer > Typography > Headings.

    Whats the issue with the colors ?

    #1300960
    Elzanne

    Hi David,

    Thank you for your reply.

    I have used that exact CSS for mobile query now, and it is not responding at all. Nothing changes whatsoever.

    The font sizes, colors and headers have been correctly set in typography. You will see I have added letter-spacing throughout the website. When you switch to tablet or cellphone, the letter-spacing is removed.

    The font colors and selected fonts of the “Our Team” page change to the plugin default in tablet/cellphone view, and not as it has been set up.

    If you flip between desktop and mobile, you should pick up the differences.

    #1301301
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You’ve put that CSS in a min-width media query:

    @media (min-width: 1025px) {
        .mb-text {
            text-transform: uppercase;
            letter-spacing: 3px;
            font-size: 15px;
        }
    }

    You’ll want to remove that media query for it to apply on mobile as well.

    #1303201
    Elzanne

    Got it!

    It works perfect now. Thank you so very much.

    Have a fab day further and thank you for all your assistance.

    #1303827
    Tom
    Lead Developer
    Lead Developer

    You’re welcome! Glad I could help 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.