Hiding different bgimages at different viewport sizes

[KEXINO]

Hi there.

I need to hide background images of different sections on a single page, at different viewport widths. For example I need .x-bg-layer-upper-image for Section 1 to hide at 768 pixels and lower, while Section 2 needs to hide it at 980 pixels and lower.

I created two classes - nobg768 and nobg980 - and added the class declarations to the appropriate sections.

The CSS looks like this:

@media (max-width: 768px) {
.nobg768 .x-bg-layer-upper-image {
background-image: none !important; 
}
}
@media (max-width: 980px) {
.nobg980 .x-bg-layer-upper-image {
background-image: none !important; 
}
}

My issue is that the section with the class nobg980 hides the background image at the same viewport width as the section with the nobg768 class. However if i set the second CSS media width to any value lower than 768px, it works.

Clearly I’m doing something wrong. Can you please point me in the right direction?

Thanks in advance!

[friech]

Hi Gee,

Thank you for writing in, that is because of 768px is still in @media (max-width: 980px) range, that means the class nobg980 is still on in that screen size (980px and below). So you need to isolate that nobg980 class that it won’t take effect in 768px and below.

@media (max-width: 768px) {
	.nobg768 .x-bg-layer-upper-image {
		background-image: none !important; 
	}
}
@media (min-width: 769px) and (max-width: 980px) {
	.nobg980 .x-bg-layer-upper-image {
		background-image: none !important; 
	}
}

Hope it helps,
Cheers!

[KEXINO]

Thanks for that. However it’s still not working. In fact with the new CSS the image doesn’t disappear at all (cleared cache, etc).

Would you mind taking at look at the page and letting me know?

[thai]

Hi @KEXINO,

I didn’t see the nobg768 and nobg980 on your sections:

It seems you forgot to add them. Can you please double check?

Thanks.

[KEXINO]

Hi there,

I’ve just double-checked and I see them:

[ruenel]

Hello Gee,

Please check your site when your are logged out or in a private browsing mode. I am still seeing what @Thai has shown in his screenshot.

I noticed that you are using CloudFlare. You may need to clear the CloudFlare cache first.

Please let us know how it goes.

[KEXINO]

Don’t know what I can tell you - or what to do next.

CloudFlare cache had been cleared beforehand. I’ve cleared it again and checked in incognito mode from 2 different browsers. I also tried bypassing CloudFlare cache completely. I’m still seeing the classes declared in each section.

[ruenel]

Hi Gee,

I am now seeing the updated version of the page:

Your code is not working because it refers to the incorrect class. Please have the code updated and use this:

@media (max-width: 768px) {
	.nobg768 .x-bg-layer-upper-image {
		background-image: none !important; 
	}
}
@media (min-width: 769px) and (max-width: 980px) {
	.nobg980 .x-bg-layer-lower-image {
		background-image: none !important; 
	}
}

Take note of the upper and lower positions of the the image.

[KEXINO]

Sorry, I don’t understand. What do you mean when you say my code “…refers to the incorrect class” ?

In both cases I want .x-bg-layer-upper-image to disappear, not .x-bg-layer-lower-image, which is why I have the CSS the way I do.

By the way, as a test I changed .x-bg-layer-upper-image to .x-bg-layer-lower-image for the .nobg980 class. However the lower image doesn’t disappear either. I also tried rebuilding the section from scratch (in case there was some kind of corruption with the existing section). That didn’t work either.

The first section of the page has the .nobg768 class applied to it, as you have confirmed. The second section has the .nobg980 class applied to it, as you have confirmed. However by adding the (max-width) variable to the 980 class stops the image disappearing.

So where have I gone wrong?

[ruenel]

Hello @Gee,

Update the code again and use this:

@media (max-width: 767px) {
	.nobg768 .x-bg-layer-upper-image {
		background-image: none !important; 
	}
}
@media (min-width: 768px) and (max-width: 979px) {
	.nobg980 .x-bg-layer-upper-image {
		background-image: none !important; 
	}
}

We would loved to know if this has work for you. Thank you.

[KEXINO]

Sorry - that’s not working either. I’ve tried various values for min-width and max-width without success.

Could this be a bug? I’ve tried disabling all plugins except Cornerstone and the issue is still there.

Are you able to replicate the issue on your own testing server?

[jade]

Hey Gee R,

I tried to use the codes previously provided and named the sections of my setup identically and they are working fine.

I checked your site and the first block of media query is working fine as well. The second one, however, is not working although when I tried the code using the console it worked correctly.

Hi there,

There seems to be an issue with the CSS code that you have in the Global CSS such as some CSS syntax error that is stopping the CSS code you are adding to work as expected.

To verify that, please copy all the codes that are in the Global CSS and paste it here.

It should provide some information if there are any CSS error that is causing the issue that you have to fix so that the CSS codes will work.

Hope this helps.

[KEXINO]

(firstly, I just wanted to thank all of you for persevering with this!)

I tried running the global CSS through CSS Lint. There were a few minor warnings, but nothing stood out as being a possible culprit.

However you gave me an idea. On my staging site I deleted all global CSS as well as all the page-specific CSS. By adding the page CSS back in stages, I think I’ve found the issue.

On the page I have a CSS class called .mobilecenter to center all text when the viewport is 768px or less:

@media screen and (max-width: 768px) {
  .mobilecenter, .mobilecenter p, .mobilecenter h2, .mobilecenter h1 {
    text-align: center !important;
    margin: none !important;{
  }
}

As you can see, there’s one too many curly brackets! I removed the extra one and now everything is working.

Sorry guys - user error (D’oh!). Thanks again for your help!

[thai]

Glad you’ve sorted it out