Sidebar issue in mobile

[Tommaso Nonvino]

I’ve seen that, in the SHOP page, there are two principal boxes, “primary” and “secondary”.

Well, the sidebar content is stored in the secondary box, the shop content in the primary box.

In the desktop version of our site, we have no problem, but in the mobile one… well, the sidebar is put at the bottom of the shop content.

We want to take it at the top, before the shop content.

How can we solve this issue?

thanks!

[Andy]

Hello, it is not an issue as such, because this is the design of the theme.

However, to display the sidebar above the main content on mobile, copy the following CSS code to Appearance > Customize > Additional CSS:

@media screen and (max-width: 768px){
    #content .container {
        display: grid;
    }
    #primary {
        grid-row: 2;
    }
    #secondary {
        grid-row: 1;
    }
}

[Author]

Posts