How to hide Sidebar in Tablet & Mobile View Storefront Theme

Hi there @elcheapoflags,

Thank so much for contact us to find out how to hide the Storefront in Tablet and Mobile view. I tested the same code

you shared on my test site and https://elcheapoflags.com/ (using developer tools) and do not see the sidebar.

However, if I preview the home page in Chrome to test something like the iPad Air or Mini, I still see the sidebar, as the CSS is only set for a max-width of 767px while those devices are much wider.

With that in mind, can you please:

• Try adding the code to the Appearance > Customize > Additional CSS section of your site’s customizer and see what happens? That should prevent the code from being overridden by any future updates.
• Share a screenshot of what you’re seeing on your end if adding the code back to the site does not help

If you don’t already have a screenshot service installed, here are a few free options:

• https://snipboard.io
• https://skitch.com/
• https://getcloudapp.com/
• https://awesomescreenshot.com/

There is also a walkthrough guide here.

Thank you!

Hi Niall,

Thank you for your reply. The CSS code is on my site – I did not remove it. It is in the Appearance > Customize > Additional CSS section.

On my own mobile device, the sidebar shows, so it is no longer working, even though it was working previously. I cleared cache and rechecked just now. Here is the screenshot: https://snipboard.io/NU21pt.jpg

You bring up a good point regarding IPad Air & Mini. I will need to look into that too.

I’m trying to just hide the sidebar on smaller screens, such as Tablets and Mobile devices. I believe my site will look fine with the sidebar for screens larger than 767px.

Again, my CSS code was working before the Storefront update about 1 month ago. I inspect and I have the correct elements so I am not sure what to do. Somehow, my CSS is being overridden. The CSS code is:

/* REMOVE SIDEBAR MOBILE VIEW */
@media only screen and (max-width:767px)
{#secondary.widget-area {
display: none;}}

Using !important does not resolve it.

I appreciate any help! Thank you.

Hello @elcheapoflags,

I checked the code and it’s working fine locally in the browser. This could be just a plugin conflict.
?
The best way to determine this is to:

• Disable all plugins except for WooCommerce
• Remove the code & re-add it.

If you’re not seeing the same problem after completing the conflict test, then you know the problem was with the plugin you deactivated. To figure out which plugin is causing the problem, reactivate your other plugins one by one, testing after each until you find the one causing the conflict. You can find a more detailed explanation of how to do a conflict test here.`

Hi All, I just wanted to report back that this issue was resolved. I found custom CSS that was not closed. This error caused the sidebar to stop being hidden in mobile view. My CSS above was correct but another custom CSS was affecting it and causing it to not work as it was not closed with “}” – it was complex and required two: }}

All good! Thanks for your input.

Hi there @elcheapoflags,

Hi All, I just wanted to report back that this issue was resolved.

I’m glad we were able to help! If you have a few minutes, we’d love if you could leave us a review: https://www.ads-software.com/support/theme/storefront/reviews/