[Resolved] Section background images not responsive on mobile

[Elzanne Botha]

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.

[David]

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.

[Elzanne Botha]

Thank you very much David! 🙂

[David]

You’re welcome

[Elzanne Botha]

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?

[David]

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 ?

[Elzanne Botha]

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.

[Tom]

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.

[Elzanne Botha]

Got it!

It works perfect now. Thank you so very much.

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

[Tom]

You’re welcome! Glad I could help 🙂

[Author]

Posts