[Resolved] How to Remove Background Images on Mobile?

[Paul]

Hi Tom,

I’m trying to make Section background images disappear when the site is being viewed on mobile devices. I’ve set background-image:none in my media queries, but per Firefox Inspector it seems that all Section backgrounds are being set as inline styles.

Here’s the code I’ve been using:

@media screen and (max-width: 960px){ 
#generate-section-3 {
background-color: #1C314C; 
background-image: none; 
}

…but it doesn’t affect the background image.

I noticed in another thread that you suggested .unique-section-class to override section classes, so thought I’d try for the section ID with #unique-section-id and .unique-section-id but neither did anything.

What to do?

Cheers!

[Tom]

As the background image is set inline, you’ll have to use !important in your CSS.

@media (max-width: 960px) { 
      #generate-section-3, .your-unique-section-class {
            background-image: none !important; 
      }
}

[Paul]

Ah yes, I did try !important, but not with .your-unique-section-class after the ID! I’ll give it a shot.

Other than the forums, do you have any more online documentation on the use of .your-unique-section-class?

Many thanks again, Tom! I’m really loving GeneratePress so far… and so are my clients. 🙂

[Tom]

The “your-unique-section-class” can be anything you like, it simply adds a class to the section which you can then use to write CSS for.

So you could make it, “my-awesome-class”, and then your CSS would be:

.my-awesome-class {
      /* CSS in here for this section */
}

This is just using basic CSS – there’s tons of info available online to learn about it if you like.

Let me know if you need more info 🙂

[Paul]

I gotcha, Tom. For a sec, I thought .unique-section-class was a pre-defined class in the stylesheet (without having taken time to see if it actually existed in styles.css). I see now it can be .whatever. I just wasn’t following the section #id with .whatever AND adding background-image: none !important; to .whatever. Therein lay the problem! Thanks again.

[Tom]

Ah, I added both just in case – you don’t actually need to use the #id in the example I gave if you’re using the unique class 🙂

[Jonathan]

I think I can just put this here… I added a fixed background to content and sidebar areas and it’s fantastic on desktop, but I’m not digging it on mobile. Can I remove them on mobile only? If so how do I go about it? Thanks in advance!

[Tom]

Give this CSS a try:

@media (max-width: 768px) {
    .separate-containers .inside-article, 
    .separate-containers .comments-area, 
    .page-header, 
    .one-container .container, 
    .paging-navigation, 
    .inside-page-header, 
    .sidebar .widget {
        background-image: none;
    }
}

Let me know 🙂

[Jonathan]

Like a charm! Thank you good sir. No more image on mobile.

Tom, King of Themes they’d say, but, I don’t have the authority.

[Tom]

I’ll take it 😉

Glad I could help!

[Abhijeet pal]

Hey Tom,

Sorry to disturb this old thread.
But I don’t get it how to hide the background image in the mobile device.

Is there any way to prevent it from loading it could make the site fast?

Thanks!

[Tom]

Hi there,

There’s no way to prevent it from loading – you can only prevent it from displaying. I believe it’s up to the browser whether or not that makes the page load faster or not.

Which element are you trying to adjust?

[Author]

Posts