Archived topic

remove background image on mobile view 960 px or less

3 replies · Started by Tim on April 7, 2020

Viewing posts 1–4 of 4

April 7, 2020 at 8:55 am #1230076

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

April 7, 2020 at 9:05 am #1230088

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/

April 7, 2020 at 10:39 am #1230198

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?

April 7, 2020 at 12:01 pm #1230303

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 :)

This archived topic is closed to new replies.

Start building better websites today.