exclude side bar for mobile

[AllisonAltus]

Is it possible to exclude the side bar on a blog post page when viewed on mobile? 

Thanks

Allison

[Jsum · Accepted solution]

@AllisonAltus,

Yes. You can hide anything at any time on a website.

A popular technique is to asign some css for hiding things at a certain width to a class name specifically for this function, like so:

@media (max-width: 768px){
    .mobhide {
        display: none !important;
    }
}

Notice the media query wrapping the css. this makes the css inside the media query only work below the width specified, in this case 768px. You can change this number to suite your needs. 

If you use this, anything with the class "mobhide" will not be displayed when the window goes below the specified width. You can add the class "mobhide" to the outer most wrapper of your sidebar in your template.

The !important tag tells the wrapper that this css is most important so it supercedes any display settings for the elements with this class. This isn't always necessary, I included to ensure that it would work. 

[AllisonAltus]

Hi @Jsum, thanks for your reply! 

So does this mean i add the html you mentioned above to the CSS wrapping of my "Blog Side Bar" module. And also add the CSS class name "mobhide" to the "Blog Side bar" module? 

My blog side bar module already has a CSS class - can you have more than one CSS class name for the same module? 

Within that module i have few different modules e.g rich text, a form, etc. It's the form module that i want to hide when viewed on mobile. 

It also already has a CSS class name? I tried adding mobhide to the css class but it's still showing on mobile? 

Thanks for your help. 

[Jsum]

You just need to add the css from my last post to your css file, then add "mobhide" as a class to your sidebars wrapper.

You can have more than one class, or as many classes as you need. you only need to have a space between each class and your good to go. 

hiding the wrapper will hide everything inside the wrapper.

[NikkiG]

Hi @Jsum - I'm having some trouble with a similar issue and am running myself in circles trying to understand it. I just spent way too long on a call with HS support. The poor girl with which I was speaking was about as lost as I was, so I think we just confused each other even more. So, please forgive me if you've answered these questions above. I did read your posts to @AllisonAltus but, my brain is a bit too fried at the moment to interpret them as answers to my specific questions. 

I need to hide three specific modules on a landing page I'm working on, not the side bar...just two images and a custom HTML module. HS Support suggested I edit my style sheet to do this. I've tried this and it's not working the way I need it to. I think I'm about 50% to where I need to be. This is the page. I'm trying to fix for mobile. I just need to hide the small print and download icons, as well as the "Share this image on your site" module at the bottom of the page. Those get all...wonky...on mobile and I think the easiest solution is to just hide them. I've given them CSS class names of "printer", "download" and "share-on-site" on my template...but after that, I get a bit lost. 

Can you help? 

Thank you! 

[Jsum]

@NikkiG,

If you class names are applied to the correct modules in your template and the class names are the same as you shared them here then you should only need to add this to your css stylesheet:

@media (max-width: 768px){
    .printer,
    .download,
    .share-on-site {
        display: none !important;
    }
}

Add this to the bottom of your stylesheet.

[NikkiG]

@Jsum Thank you!