column width / offset change at...

User 2395091 Photo


Registered User
2 posts

I am trying to create a page layout with square image links grouped in centered rows. I want the images to be non-overlapping and auto-resize with shrinking screen width. For small screen widths the number of images per row must go down in order to keep them readable. I want some empty space to the left and right of the rows of images to adjust the square image sizes to the available screen height.

I am trying to do this by
(1) using a grid of 12 spans, initially at 1024 screen width
(2) adding 4 columns of width 2 spans, each with a left (push) offset of 2 spans. This centers nicely a single row of 4.
(3) At a "small screen" break point I change the width of each column to 4 spans. I expect this to slide the third and fourth column down to the next row, still centering the two columns in each row with the two-span offset. However, what happens is that the third image is pushed halfway off the right edge of the screen in the first row, but the fourth image is shown in a next row -- indeed with a 2-span offset.

So what am I understanding incorrectly here? How can I do what I describe above in RLMP?

Thanks,

Marijn
User 103173 Photo


VP of Software Development
0 posts

Can you attach your project file Marijn?
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.