Hide Sidebar on Mobile

[tarekkaram0]

Hi,

I have sidebar on my posts that displays a custom menu. I would like to hide sidebars on mobile device. To be specific, I would like the sidebar to be hidden when screen size is 999px or less.

Any ideas how I can do it? I know your theme has ability to remove sidebar (blog width full) but I only want sidebars removed on screen less than 999px.

Thank YOu!

[Sonl Sinha]

Hi,

Kindly show us your website URL so that we can assist further.

Regards,
Brad

[tarekkaram0]

My website URL is SamirSigns.com.

Here is what I currently have in the custom CSS box

@media screen and (max-width:1040px) {
.panel-grid.panel-no-style, .panel-grid.panel-has-style .panel-row-style { display:block !important;}
#footer-wrapper iframe { width:100%; box-sizing:border-box;}
}

#wrapOne .panel-grid.panel-no-style, .panel-grid.panel-has-style .panel-row-style { display:inline-block;}
#wrapOne #pgc-2-0-0, #wrapOne #pgc-2-0-1 { float:left;}

@media screen and (max-width:1007px) {
.header { display:none;}
}

@media screen and (min-width:567px) {
#content-desktop {display: inline;}
#content-mobile {display: none;}
}

@media screen and (max-width:566px) {
.header { display:none;}
#content-desktop {display: none;}
#content-mobile {display: inline;}
}

@media screen and (max-width:499px) {
.nivoSlider img { width:220% !important; max-width:220% !important;}
}
.blog-post-repeat .postmeta { display:none;}
.header .header-inner .nav { top:0;}

[tarekkaram0]

An example of the sidebar I am talking about can be found on this page: http://samirsigns.com/broshures/

[Sonl Sinha]

Hi,

Kindly check our documentation link to setup no sidebar page.
http://sktthemesdemo.net/documentation/skt-construction-doc/#page-templates

Regards,
Brad

[tarekkaram0]

Hi Brad,

Thank you for pointing out the documentation, but you did not understand my request. I already know how to set post/page width and sidebar options to show/hide. So what you sent me does not help at all.

What I need to for the sidebar to be hidden/disable on MOBILE devices only. When the screen size is less than 500px, I need the sidebar which I have visible on DESKTOP to be hidden or disabled on Mobile.

Please see that you can help me with this!
Best,
Tarek K.

[Sonl Sinha]

Hi,

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

#sidebar { display:none;}

@media screen and (max-width:499px) {
#sidebar { display:block;}
}

Regards,
Brad

[Author]

Posts