LingL

Hi @tuanphan - just checking if the custom CSS I removed helps? Thanks.

Hi @tuanphan - I've removed the CSS attributed to it. Let me know if this is what you wanted me to do. Thx, Ling.

Hi @tuanphan - I've had to tweak the content and remove one person. I had assumed that the code would be ok, but it appears that the stacking on this has gone askew - specifically, it becomes single column after two rows. Is it possible to have it so the third row has two ? This is what it looks like now: Column 1 --- Column 2 Ling --- Shallen Jodie --- Oliver Ameila --- Hannah Ellie ---

Thanks @tuanphan - I've added this in and the sequence is expected up until after Oliver. It currently responds as Column 1 --- Column 2 Ling --- Shallen Jodie --- Oliver Maya --- Hannah Ellie --- Also, is there code that is scalable such that if I add more, I wouldn't need to update the CSS to respond in this way? Many thanks again for your help! Ling

Hi @maria39 - depending on the outcome you're after, perhaps try to use similar CSS that @tuanphan provided me in this thread. The first one worked well when I had 6 columns. You'll just need to inspect for the identifier to apply the CSS.

Thanks @tuanphan - one last question. Is it possible to have the elements be sequenced left to right, rather than transposing column by column? e.g. the sequence would be under column 1 and 2 below: Column 1 --- Column 2 Ling --- Shallen Jodie --- Oliver Ellie --- Maya Hannah --- Many thanks, Ling

Hi @tuanphan, no, not on mobile. I want two column for resolution between 641px and 1239px. I had already tried to put 50% on the width, as below but it does not work-it's published in production now. It stays as 4 columns: /* Teachers */@media screen and (max-width:1239px) and (min-width:641px) {div#page-6139744fdcd5905e445d6ad8 .span-2 { width: 50%;}}

Hi @tuanphan - I tried the 50% as you suggested and it retains 4 columns until single column on mobile view. This is the current CSS that I have: /* Teachers */ @media screen and (max-width:1239px) and (min-width:641px) { div#page-6139744fdcd5905e445d6ad8 .span-2 { width: 50%; } } Thank you.

Hi @tuanphan - would you happen to know how to adjust this so that I can then go from 4 column to 2 column? Many thanks, Ling

Thanks @tuanphan - this is a really helpful alternative. If there a way to allow the text to roll on the next line like in the preview version screen I attached?

Hi Tuanphan - I've published the page and you can see it at '/home'. thank you.

Hi tuanphan - it's now published, and you can see it '/teachers'

Site URL: https://butterfly-clover-xpmk.squarespace.com/ Hi - I'm having trouble trying to force my image and text blocks to progressive stack responsively as the screen size decreases in width. I'd like to make it so it is divisible by 2: It's currently 6 column width in large screen, and when it scales down the columns become really skinny and the text is not nice to read; and then it snaps to the default single column. What I'd like it to do is as the width decreases from 6 columns, I'd like it to stack to 3 column (?), then 2 column, then finally 1 column. Is this possible? Current 'desktop' view: Nasty skinny smaller width view that I want to avoid and force elegant stacking:

Site URL: https://butterfly-clover-xpmk.squarespace.com/ I'm having trouble trying to figure out how to prevent the text from overlapping when the site scales down for smaller screen devices. First I wanted the 'Membership and passes' text to wrap within the confines of the column, like it does in editor view (see image below). For some reason it doesn't do this in production! Help is much appreciated: