Archived topic
How to Remove Background Images on Mobile?
11 replies · Started by Paul on May 8, 2015
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!
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;
}
}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. :)
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 :)
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.
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 :)
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!
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 :)
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.
I'll take it ;)
Glad I could help!
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!
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?
