[Resolved] How to Remove Background Images on Mobile?

Home Forums Support How to Remove Background Images on Mobile?

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #106667
    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!

    #106722
    Tom
    Lead Developer
    Lead Developer

    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; 
          }
    }
    #107073
    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. 🙂

    #107080
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #107155
    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.

    #107185
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #165652
    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!

    #165709
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #165722
    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.

    #165797
    Tom
    Lead Developer
    Lead Developer

    I’ll take it 😉

    Glad I could help!

    #545913
    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!

    #545952
    Tom
    Lead Developer
    Lead Developer

    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?

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