Column layout is breaking for mobile landscape on press

Design help General
1

I have an on press style to reduce my image sizes, for some reason this is effecting my column layouts in landscape mobile view.

I have tried the same effect with padding on both images or columns or changing image widths and no change to paddings but no matter what technique I use for this the second row in mobile landscape always breaks. I also tried it all with on hover to the same effect.

http://morgan-williams-portfolio.webflow.io/stickers/list
https://preview.webflow.com/preview/morgan-williams-portfolio?preview=cf733d656e07648929f80a435764e5dc

(Also tried sharing the site but it still 404s)

2

Hey @Cael_Prussian

It is hard to say what to problem is without the share link.
But from what I can tell you will need to figure out how much height you are loosing in the image and then add it to the bottom margin in the pressed state.

For example if when pressed the image shrinks 5px in height then add 5px of margin to the bottom of the image at the same time. This should maintain the structure of the layout.

Alex

3

Thanks for the suggestion Alex, my site is shared in dashboard but not working for some reason.

I did try giving a margin well above the size difference but it’s still happening. Here is a screenshot Awesome Screenshot

4

Hi @Cael_Prussian, I would remove the 215px width on the pressed state, and instead, add scale in the pressed state set to .90

239×693 36.9 KB

Try that and see if it helps :smile:

Cheers,
Dave

5

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