How to adapt for mobile?

Hi everyone,

I got a template and put a grid of stacks on the homepage, 3X3. Now when this shows up on a mobile only the first column displays, not 2 and 3.

What am I doing wrong? How can I make the columns adapt to a different screen (ie mobile phone and tablets)?

Thanks for the help!

Ties

Which grid stack is are you using? Most grid stacks have setting that control how the content is displayed on model devices. Usually, by default, they stack the three columns into a single column. The content from columns two and three are usually below column one.

Tnx. The content is not below. It is next to it. And I cannot scroll there. So it is not accessible on mobile devices.

I use the grid from stacks.

Without a link to the website, it will be difficult to troubleshoot.

Tiesmellema.nl

The Grid stacks included with Stacks is pretty basic and doesn’t have settings for adjusting the display on mobile. You’ll probably need a more advanced grid stack where you can set different cell widths on mobile, tablet and desktop.

You can Google for “rapidweaver grid stacks” and find quite a few available. I’ve used AdaptiveGrid quite a bit.

tnx, just did that and it works. But I seem to have no freedom in making a division. Now there four items in the first column and two below. I’d rather have 3 and 3 on the desktop

The best responsive columns stack I’ve found (and I’ve tried many) is this:
https://www.doobox.co.uk/stacks_store/demos/reflow.html

Perfect balance between intuitive UI settings, absence of framework bloat and predictability.

Not sure what stack you are using.
You could just take two of the delivered 3-column stacks. One on top of the other. Then set them to stack on either mobile or tablet.

Looks like you’re using iFrames for the content. And the sample URL has only Five areas so you could use a 3-column followed by a 2-column.

You need to adjust the space each cell takes up ay each device width. The default is for four cells at desktop

Try these settings for all of your cells.

46%20PM

Tnx so much for this. And for the other advice as well. It worked!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.