remove background image on mobile view 960 px or less

[Tim]

Hi
We are trying to get the background image removed from the hero section #3 on this page when the view is less than 960 px because the font can not be read easily over the image.

I have tried several class css inserts into the section “Settings” to no avail.

Cleared cache – the whole nine yards… made the background image set to none !important and everything.

How do we make it disappear for viewports less than 960 px?

https://visible-progress.com/

Thanks again

[Leo]

Hi there,

You are inserting CSS in the custom class field which is not the correct method.

Please remove that then add this CSS:

@media (max-width: 960px) {
    #generate-section-3.generate-sections-container {
        background-image: none;
    }
}

Using one of these methods:
https://docs.generatepress.com/article/adding-css/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tim]

Thanks that worked. How can I find documentation on how to target different items in this theme using CSS just like you did (classes etc) and using simple CSS on page as well as for the entire site?

[Leo]

We currently don’t have documentation for this as there are simply too many classes to list out.

I just use browser inspect tool – it’s super useful for making CSS tweaks as you can see all the classes and CSS associated with a certain element.

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts