[Support request] How to hide the sidebar only in mobile view

[Zipeng]

I want to disable my right sidebar on the mobile view only. and show up at the desktop view. How can I do that?

[David]

Hi there,

you can use this CSS:

@media (max-width: 768px) {
    #right-sidebar {
        display: none;
    }
}

[ROHART]

Hi David,

I want the same thing. I add the css code on my blog my-wildlife.com but it doesn’t work. Any idea why ?

Gregory

[David]

Hi there,

where are you adding the CSS ?

[ROHART]

Hi David,

On the “additionnal css” menu (it’s a transmation of my french menu so the english name can be a little bit different) = > ../wp-admin/customize.php?url=https%3A%2F%2Fwww.my-wildlife.com%2Fparc-ornithologique-de-pont-de-gau%2F

[Ying]

Hi there,

As far as I can tell, the sidebar is gone on mobile.

Have you cleared your browser cache?

Let me know 🙂

[ROHART]

Yes, I cleared the browser cache.
On mobile, the sidebar is under the central part of my articles.

You can check for example on the article https://www.my-wildlife.com/ou-faire-un-safari-au-kenya/

Gregory

[David]

Aah now i can see the CSS – the problem is this comment:

// pas de sidebar en mode mobile

Its an invalid comment for CSS and will break any code that comes after it.

CSS comments have to be wrapped in /* */

So it should be:

/* pas de sidebar en mode mobile */

[ROHART]

Thanks David for your help. It works and I learned something today.

[David]

You’re welcome.

As a note:

// this comment is fine for PHP and Javascript

[Author]

Posts