Hide Sidebar on Mobile

Home Forums Construction Pro/Build Forum Hide Sidebar on Mobile

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #79487
    tarekkaram0
    Member
    • Topics: 4
    • Replies: 11
    • Total: 15
    Member since: July 12, 2017

    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!

    #79501
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25334
    • Total: 25334
    Member since: August 16, 2013

    Hi,

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

    Regards,
    Brad

    #79561
    tarekkaram0
    Member
    • Topics: 4
    • Replies: 11
    • Total: 15
    Member since: July 12, 2017

    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;}
    
    
    #79562
    tarekkaram0
    Member
    • Topics: 4
    • Replies: 11
    • Total: 15
    Member since: July 12, 2017

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

    #79625
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25334
    • Total: 25334
    Member since: August 16, 2013

    Hi,

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

    Regards,
    Brad

    #79706
    tarekkaram0
    Member
    • Topics: 4
    • Replies: 11
    • Total: 15
    Member since: July 12, 2017

    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.

    #79772
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25334
    • Total: 25334
    Member since: August 16, 2013

    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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.