Hi, I am using YourHead’s Grid stack and have created grids in 3 different responsive layouts … desktop, tablet, and mobile.
When I use the simulator, any of the iPhone choices show me the Tablet layout I have made, and when I choose any of the iPad choices, the desktop layout shows.
Even on my iPhone 8, the tablet version shows up. I have a 2 column grid in my project for Mobile, but the 3 column tablet grid shows up.
Has anyone had any experience with this, or know how to fix it?
YourHead’s included Grid stack is very basic. It does not have a way to set the number of columns at each breakpoint. As you’ve found out, this means that you need to have multiple sets of grid stacks and show and hide them based on screen size. Doing it this way is going to be considerably more work than if you used a different grid stack. Also, it increases the size of the html downloaded to browsers, as it will download all three sets of grids (mobile, tablet and desktop) and all of the contents they contain on all browser sizes.
You should look at the many much more powerful grid stacks out there. They allow you to have one set of grids and then specify how many columns to use to display that one grid on the different screen sizes.
Here’s a link to AdaptiveGrid by Stacks4Stacks. It’s free and is much more powerful than the included grid stack. There are a lot of grid stacks available. Some are simpler to use, some offer more features, so if this doesn’t meet your needs, have a look at others.
Thank you so much @DLH - that made my life so much easier!
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.