How set the widget's visibility or not on the mobile phone

Support
#1

Good evening.
In my site (hagarlane.com) I set the widgets that I wanted to see in the main sidebar, which is the blog sidebar. In my page “Contact” I set 2 widgets because the page was too much white and empty, and I like now, whith those 2 widgets, but on the mobile phone those widgets in the bottom part of the Contact page are a little ridiculous.
Can you help me to remove those 2 widgets in the Contact page ONLY in the mobile phone?
Thank you a lot.
Best regards.

#2

Hi

Thank you for reaching out to us. Yes you can do this by getting the page ID of your contact page and then add the following code in the Theme Options > CSS:

@media screen and (max-width: 979px) {
    .page-id-331 .x-sidebar {
        display: none;
    }
}

To find out page IDs please see https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!

#3

Thank you for helping me.
I put your code right now but nothing is changed on my mobile phone. It’s the same.
What I’m doing not well? (My page id is exactly 331, as you wrote to me, I have verified)
Thank you.
Best regards

#4

Hello Patrizia,

The code did not work because it is broken. You have this css:

@media (min-width:979px){
    body,.x-sidebar *{
        color:#5A5A5A !important;
    }
    .single-post .entry-content{
        text-align:justify;
    }
    @media screen and (max-width:979px){
        .page-id-331 .x-sidebar{
            display:none;
        }
    }

Please have it updated and use this instead:

@media (min-width:979px){
    body,.x-sidebar *{
        color:#5A5A5A !important;
    }
    .single-post .entry-content{
        text-align:justify;
    }
}

@media screen and (max-width:979px){
    .page-id-331 .x-sidebar{
        display:none;
    }
}

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

#5

Thank you RueNel,
It works PERFECTLY right now.
Thank you to you and to Nabeel.
Best regards.

#6

You’re welcome!
We’re glad we were able to help you out.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.