Display Content/Sidebar on iPads & Tablets

Hi there,

The issue with this is, not all tablets have the same viewport width.

Some tablets, share breakpoints with some mobile devices (768px). As you can see in your inspection, iPad uses 768px. If you change that to a larger tablet like iPad Pro, you'll see your sidebar.

GP's sidebar is set to go below the content on mobile viewport, and since smaller tablets share breakpoint @media rule with mobile devices, these small tablets also have their sidebar below the content as well.

This is quite tricky to deal with as some tablets(larger ones) share viewport with smaller desktops and some tablets(smaller ones) share viewport with larger mobile devices. The default is the best compromise.

Hi Elvin, yes, I realize that, but is there some recommended CSS I can use to get the sidebar to display adjacent to the content on such devices?

I am currently using the following media queries in my CSS:

@media (max-width: 768px) {...)
@media (min-width: 769px) and (max-width: 1024px) {...}

Hi Paul,

Your media query setting made iPad a mobile device.

You could try adjusting to:

@media (max-width: 767px) {...)
@media (min-width: 768px) and (max-width: 1024px) {...}

Hope that works.

Hi Ying, thanks for the suggestion. I did try that already but it didn't do the trick. I suspect it's because grid classes are involved on both the primary and sidebar containers and I'm not sure about the recommended way to deal with all that. I thought maybe there's a way to do it more easily rather than adjusting all the CSS for the grid class widths on such devices. If not, I'll just skip it.

I found a workaround. Instead of using a sidebar widget, I added the category links to a Primary Menu and set that menu to show in the right sidebar. Now when a mobile or small tablet user visits the site, they can click on the mobile nav menu at the top rather than having to scroll below the content to see the links.

Nice, glad you figured a way out :) It seems a better solution!