Jump to content

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

Recommended Posts

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:

image.thumb.png.dc1c647955a38313e5762ef6965878ed.png

Nasty skinny smaller width view that I want to avoid and force elegant stacking:

image.thumb.png.cb7d6d60999d088525e97429defc104c.png

Link to comment
  • Replies 19
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
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%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
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%

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

Link to comment
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%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

 

 

Link to comment
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;
}
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Link to comment
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%;
}}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

 

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.