[Support request] Can’t remove sidebar on mobile

[Danny]

Hey there,

I’m trying to remove the sidebar on mobile, bc. it interferes with responsive tables on my website. Now the pages are “wobbly” like in the old days. You can see it here: My Website

Tried this code (s. below) in custoom CSS, but it still doesn’t work. Is there any recommended troubleshooting? Thanks for any help.

/* remove sidebar on mobile */

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

#primary {
width: 100%;
float: none;
left: 0;
}

.separate-containers .site-main {
margin-left: 0;
}
}
/* END remove sidebar on mobile */

[David]

Hi there,

can you disable you cache/optimization plugin as i cannot see those styles in the CSS – and all CSS looks to be inlined.

[Danny]

I’m sure I told the Autoptimize plugin to inline CSS. I deactivated the plugin, but the sidebar is still there.

[David]

Are you using any other cache plugins as i still cannot see the loading of the style sheets ?

[Danny]

Ah, ok, I recently connected to Ezoic and they have their own caching. Disabled it. Did it work?

[David]

Ok thats better 🙂

Try this CSS:

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

  #primary {
    width: 100%;
  }
}

[Danny]

Ok, that worked! Unfortunately, it didn’t solve my problem with the table that is no longer responsive, but I might just have messed sth. up in the settings.

If you have a quick idea about that I’d like to hear it, but aside from that I’ll declare this threat as “solved”.

Thanks for your help and patience, David!

***Edit***

Now the pages are responsive again. Loading the page, it starts out non-responsive (table much longer than content, therefore lots of white space on the right side), but after a few seconds it gets into “normal” mode again. Never seen anything like this. Sorry, for the confusion.

[David]

If the styles are changing after the page is loaded eg. width changing. Then this is generally caused by either:

1. Cache/Optimization plugins that are deferring CSS files.
2. Javascript is being used to update the styles – which may be used by some plugins if its adjusting the responsive behaviour of elements.

[Author]

Posts