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:
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.
@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?