Docs

[Leanna]

Hi, I see lots of posts about hiding all bg images on mobile but I do not want to globally hide all my bg images on mobile, I only want to hide one bg image on one page. How can I do this? I have been trying to figure out my page ids as I did see some customizer code that used those, but I’m not sure what the “page id” is. What shows up in the URL in “Edit” on the page for which I need to hide bg image seems to be post.php?post=294&action=edit (www.tellasia.org/donate). Thanks for your help.

Btw, I’d really like to know why my “pages” are showing up as “posts” and how to get this “page id” to be a little simpler… like how about simply the name that I gave the page? I changed permalinks to “Post Name” but nothing seems to have changed.

[Leanna]

This reply has been marked as private.

[Jade]

Hi Leanna,

You can see the guide on this page on how to determine the page ID.

Aside from the page ID, you will have to use the section ID if you intend to be more specific which section you will be targetting in CSS. You can add an ID to a section by adding it in the ID field in Cornerstone.

The code should look something like this:

@media (max-width: 480px) {
    .page-id-XX #x-section-XX {
        background-image: none !important
    }
}

Please replace XX in .page-id-XX to the correct page ID then x-section-XX in #x-section-XX to the correct section ID.

Hope this helps.

[Leanna]

Ok I put this in but it’s not hiding the bg image:
/*HIDE BG IMAGE ON MOBILE ON ONLY CERTAIN SECTIONS*/
@media (max-width: 767px) {
.page-id-294 {
background-image: none !important
background-color: #990000;
}
}

[Nabeel A]

Hi again,

There is a syntax error in your code, please replace it with this one:

@media screen and (max-width: 767px) {
.page-id-294 {
    background-image: none !important;
    background-color: #990000;
}
}

Let us know how this goes!

[Leanna]

Nope; bg image still appearing in mobile.

[Paul R]

Hi Leanna,

You can try this code instead.

.page-id-294 #x-section-1 {
     background:transparent !important;
}

Hope that helps.

[Leanna]

that worked, thanks! I can also put any # color in there and it works too.

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts