Jump to content

Mobile Order of Image Blocks

Recommended Posts

Site URL: https://seabass-maroon-5h8g.squarespace.com/

For my team page (https://seabass-maroon-5h8g.squarespace.com/team-full-width), I have added custom css in order to display team members in two columns on mobile, rather than a single column. My current code is the following:

@media screen and (max-width:767px) {
div#page-section-5f5a7d3357b36416be95a88a>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f5a7d3357b36416be95a88a .image-block {
    padding: 5px;
}
div#page-section-5f5a7d3357b36416be95a88a .image-block * {
    font-size: 12px;
    margin-top: 0;
    margin-bottom: 0;
}
}

However, the order of the team members gets messed up. I would like the team members to stay in the order that is used on desktop (left to right from the top). Is there something I can amend in the code that would correct this?

Link to comment
  • Replies 11
  • Created
  • Last Reply
7 hours ago, bawebb123 said:

Hi tuanphan. I sent you a direct message. But in case others could help, the access password is oakpointtest

The link doesn't exist. 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
4 minutes ago, bawebb123 said:

 

Sorry. I recently changed the path. and have updated to the following:
https://seabass-maroon-5h8g.squarespace.com/team

You need to adjust layout a bit.

1. Add image 1,2,3,4

2. Add Line Block

3. Add Image 5,6,7, 8

...

Remove Line Blocks

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
On 9/14/2020 at 5:15 PM, tuanphan said:

You need to adjust layout a bit.

1. Add image 1,2,3,4

2. Add Line Block

3. Add Image 5,6,7, 8

...

Remove Line Blocks

Hi Tuanphan,

I recently updated the order of the people on my page and the order on mobile is all messed up. I am still using the below code and I tried your line block trick. Now there is a bunch of white space in between people. Some people are aligning on the left of mobile screens too instead of the left.

https://seabass-maroon-5h8g.squarespace.com/team

Password: oakpointtest

@media screen and (max-width:767px) {
div#page-section-5f5a7d3357b36416be95a88a>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f5a7d3357b36416be95a88a .image-block {
    padding: 5px;
}
div#page-section-5f5a7d3357b36416be95a88a .image-block * {
    font-size: 12px;
    margin-top: 0;
    margin-bottom: 0;
}
}

 

 

Capture.PNG

Link to comment
@media screen and (max-width:767px) {
div#page-section-5f5a7d3357b36416be95a88a>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f5a7d3357b36416be95a88a>.row>.col>.row>.col:nth-child(2n+1) {
    clear: left !important;
}
div#page-section-5f5a7d3357b36416be95a88a .image-block {
    padding: 5px;
}
div#page-section-5f5a7d3357b36416be95a88a .image-block * {
    font-size: 12px;
    margin-top: 0;
    margin-bottom: 0;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
3 hours ago, tuanphan said:

@media screen and (max-width:767px) {
div#page-section-5f5a7d3357b36416be95a88a>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f5a7d3357b36416be95a88a>.row>.col>.row>.col:nth-child(2n+1) {
    clear: left !important;
}
div#page-section-5f5a7d3357b36416be95a88a .image-block {
    padding: 5px;
}
div#page-section-5f5a7d3357b36416be95a88a .image-block * {
    font-size: 12px;
    margin-top: 0;
    margin-bottom: 0;
}
}

 

Amazing. You're the best tuanphan

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.