How to have 3 columns on desktop, 2 on tablet, 1 on phones?

Hey all!

Looks like when I make a dynamic list 3 columns on desktop that it has to be the same for tablet view? Is there a way to make it 3 columns on desktop and 2 columns on tablet?

Here’s a video showing it automatically being the same column structure:


Here is my public share link: LINK
(how to access public share link)

try using Flexbox instead. you gain more control.

This may help:

If you don’t want to use flex-box (even though you will have more control, I really can’t get my head around it at all)…

Set the dynamic list on the desktop to be 1 column, so it stretches all the way across. Then set the dynamic item to be 33.3% and push to the left. Don’t set a height, use a div within the dynamic item to set the height.

On tablet, set the dynamic item to a width of 50%

On mobile set item to have 100%

Hope that makes sense, I’m happy to share a project if you need to see what I mean. I’ve just used this on a live website with great effect.

Thanks so much for the responses, guys! I definitely want to dig deeper into the flexbox stuff, but for now, @magicmark, that worked perfectly! I really appreciate you guys taking the time to help me out. Much, much appreciated. :slight_smile:

1 Like

@PixelGeek I want to make a structure with 4 columns on desktop and 2 columns on tablet. I watched the “Designing dynamic lists with flexbox” and this is definitely the solution that I want, BUT I don’t want to use Dynamic Content. Is there another solution?

Hey! It doesn’t have to be dynamic content. You can simply wrap the columns in a flexbox container and then set the column elements to 25% if you want 4 columns and 50% if you want 2. Does that help?

1 Like

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