Docs

[Robert E]

Hi,

I’m trying to apply separate “mobile” background images in 2 sections of a page using a media query in the custom CSS when the screen width is 480px or less (i.e., mobile screen width). In the page the div id’s for the 2 sections are #x-section-1 and #x-section-2. In cornerstone, I’ve added the class “home-new” for each of the 2 sections. In the custom CSS (i.e., accessed via the “Edit Global CSS” button in the Appearance > Customize > Custom area) I have the following code:

@media (max-width:480px) {
.home-new #x-section-1 {
background-image: url(‘wp-content/uploads/2016/08/HERO_mobile.jpg’) !important;
}
.home-new #x-section-2 {
background-image: url(‘wp-content/uploads/2016/08/HOME_AND_OFFICE_mobile.jpg’) !important;
}
…
}

However, it doesn’t appear to work, so when I decrease the width of the page to 480px or less, the mobile background images are not displaying. Can you help me determine what I’m doing wrong? I’ve seen a similar solution recommended in another post. I’ll provide my site credentials in a follow-up post.

Thanks,

Robert

[Robert E]

This reply has been marked as private.

[Rupok]

Hi Robert,

Thanks for writing in! There is no such class as .home-new so the selector is not right. Also you should use absolute URL for the image like http://callboxstorage.com/wp-content/uploads/2016/08/HERO_mobile.jpg not /wp-content/uploads/2016/08/HERO_mobile.jpg

Let’s use the code without preceding .home-new and add under page level CSS from Cornerstone Settings Tab so it won’t interfere with other pages.

Hope this makes sense.

[Robert E]

Hi Rupok,

I specified the “home-new” class for each of the 2 sections in the page. Please see the attached screenshot for an example. I was thinking this was needed otherwise the background image overrides would apply to every section with div id’s x-section-1 and x-section-2 across all pages in the entire site, and I wouldn’t want that to be the case.

When you say “add under page level CSS from Cornerstone Settings Tab so it won’t interfere with other pages.” what would that code look like? And can you provide a screenshot illustrating where exactly in Cornerstone I would need to put this?

Thanks!

Robert

[Friech]

Hi Robert,

Yes, you’re on the right track. Just update your css code to this:

@media (max-width:480px) {
	 #x-section-1.home-new {
		background-image: url('/wp-content/uploads/2016/08/HERO_mobile.jpg') !important;
	}
	 #x-section-2.home-new {
		background-image: url('/wp-content/uploads/2016/08/HOME_AND_OFFICE_mobile.jpg') !important;
	}
}

And I advice always use this marks /* */ when commenting CSS, not this //

Hope it helps, Cheers!

[Robert E]

Hi Friech,

Thanks so much for clearing that up for me. It worked! 🙂

Robert

[Rue Nel]

You’re welcome! We’re happy to help you out.
If you need anything else we can help you with, don’t hesitate to open another thread.

[Author]

Posts