How to change collection list layout for different break points

Design help CMS
1

Hello!

I was wondering if it’s possible to edit layout for collections lists on different breakpoints without affecting the undesired breakpoint? (eg. I want to change the layout of the grid on the mobile, but it affects the desktop as well)

This is the collection item on desktop:

image
image1476×516 133 KB

This is the collection item on mobile with the same styling

image
image485×501 77.3 KB

I want to change it to look like this because of the image resizing (I have it set at 100% otherwise it’s tinier compared to the project details)

image
image485×592 66.9 KB

There’s other stylistic differences I want to make but this is in essence my problem.

(On another note, although an easy fix, for some reason whenever I try to make changes to the layout, the text will suddenly change to italics?)

I hope that makes sense ^^‘’ Thank you in advance

Here is my public share link:

https://preview.webflow.com/preview/kristiannes-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=kristiannes-portfolio&preview=7652172f8b5b704a56eb17456476394e&workflow=preview

2

Hi Kristianne,

The basic approach is to use layout mechanisms like a flexbox to change the flow and direction across the breakpoints.

I’m not certain how your selected project effect element is setup to work, so I’d separate out the layout of your text and image panels. The easiest way to do that is;

At the desktop breakpoint;

  • Change your collection item layout to Flex, horizontal
  • Give your Project Details text panel a width of 40%
  • Give your Link Block a width of 60%

At your mobile breakpoint;

  • Change your Collection Item layout to Flex, vertical, reverse
  • Reset the Gap as well, or you’ll see a gap in mobile
  • Give your Project Details text panel a width of 100%
  • Give your Link Block a width of 100%

You’ll need to adjust your rounded corners etc. too to your liking for the mobile view.

1 Like