How to change collection list layout for different break points


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:

This is the collection item on mobile with the same styling

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)

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:

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