[Support request] Change cutoff point to remove sidebar on tablet

[Kristjan]

Hello,

I am using GeneratePress Premium on my site: https://searchtraffic.com/

I want to make the site look nicer on tablet by removing the sidebar in portrait mode.

Here’s a screenshot of what it looks like now on my iPad: https://ibb.co/cDrY5sX

I think the text area looks too small with the sidebar on the right, plus the text gets way too big when zooming into just the text area.

Is there a way to change the width cutoff to make the sidebar go away on tablet?

As in, I want to keep the sidebar on desktop, but remove it for the narrower screen size of most tablets in portrait mode.

Thanks,
Kris

GeneratePress 2.2.2

GP Premium 1.7.8

[Leo]

Hi there,

You can try some CSS like this:

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

Adding CSS: https://docs.generatepress.com/article/adding-css/

Just fine tune the px number to hide at your desired width.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kristjan]

Thanks. I don’t want the sidebar to disappear though, just move to below the content like it does on mobile.

I’m assuming display: none; will just make the sidebar disappear completely?

[Leo]

Give this a shot:
https://generatepress.com/forums/topic/move-sidebar/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts