Progressive stacking of image and text blocks from larger screen to table to mobile view

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:

Hi,

What is access password?

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

On 10/4/2021 at 10:53 AM, LingL said:

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

Add to Design > Custom CSS. This code will make 3 columns from 768px to 1024px

/* Teachers */
@media screen and (max-width:1024px) and (min-width:768px) {
div#page-6139744fdcd5905e445d6ad8 .span-2 {
    width: 33.3333%;
}
}

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

On 10/30/2021 at 2:33 PM, LingL said:

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

If you want 2 columns, just edit 33.3333% to 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.

On 11/1/2021 at 7:44 AM, LingL said:

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.

You want 2 columns on mobile? Above code targets from 641px to 1239px

You need to use this new code

/* Teachers */
@media screen and (max-width:640px) {
div#page-6139744fdcd5905e445d6ad8 .span-2 {
    width: 50%;
}
}

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%;
}
}

On 11/4/2021 at 3:37 PM, LingL said:

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%;
}
}

 

 

Add to Design > Custom CSS

/* Teachers */
@media screen and (min-width:641px) and (max-width:1239px) {
div#page-6139744fdcd5905e445d6ad8 .span-12>.row:nth-child(n+3) {
& {
    width: 50% !important;
    float: left !important;
}
.span-3 {
    width: 100%;
}
.span-9 {
    width: 100%;
}
.span-6 {
    width: 100% !important;
}
}
}

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 @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.

On 11/8/2021 at 8:10 AM, LingL said:

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

Remove the code & use this new code

/* Teachers */
@media screen and (min-width:641px) and (max-width:1239px) {
div#page-6139744fdcd5905e445d6ad8 .span-12 {
&>.row:nth-child(3)>.span-3 {
    width: 50%;
}
&>.row:nth-child(3)>.span-3:nth-child(2n+1) {
    clear: left;
}
&>.row:nth-child(4) {
    display: flex;
    flex-direction: column-reverse;
}
&>.row:nth-child(4) .span-9 .row>.col {
    width: 50% !important;
}
&>.row:nth-child(4) .span-9 .row .span-6 .span-3:first-child {
    width: 100% !important;
}
&>.row:nth-child(4)>.span-9 {
    width: 100%;
}
&>.row:nth-child(4)>.span-3 {
    width: 50%;
}}
}

On 11/8/2021 at 9:09 AM, maria39 said:

Which CSS is works for you? I also face this type of problem for one of my client's website.

Can you share link to page where you have problem? We can help easier

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

On 11/10/2021 at 12:08 PM, LingL said:

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

 

Last 3 items, need to reverse order to get 2 items/row, if order is kept, it will be
item 1
item 2 - item 3

If you add new items, you will need to update the code again. You might consider using Summary or Gallery Block to replicate the layout, so you only need to use 1 code, no need to update the code in the future.

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 ---

On 1/28/2022 at 1:48 PM, LingL said:

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 ---

Hi. Can you remove table code? I will check it again easier

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 - just checking if the custom CSS I removed helps?

Thanks.