Jump to content

2 column image on mobile

Recommended Posts

Site URL: https://www.regeneration.vc/about

Hi! On the mobile view of the Team page, I'm trying to create 2 columns of images and names and titles on mobile. In this example, the two images should be next to each other with each person's name underneath (kinda like it is on the desktop view)

 

This is the webpage: https://www.regeneration.vc/about

 

Here is a picture of what it looks like now and I want to be able to put the team members side by side on mobile, and then the advisory board side by side on mobile. All help appreciated... @tuanphan might you be able to help? Thank you!!!

 

Screen Shot 2020-12-15 at 00.44.50.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

It looks like you solved with this code

@media screen and (max-width: 640px) {
    #team-split-left .sqs-col-5 {
        float:left !important;
        width: 50% !important
    }
}
@media screen and (max-width: 640px) {
    #team-split-right .sqs-col-5 {
        float:left !important;
        width: 50% !important
    }
}

You can combine them to make code shorter

@media screen and (max-width: 640px) {
    #team-split-left .sqs-col-5,  #team-split-right .sqs-col-5 {
        float:left !important;
        width: 50% !important
    }
}

For anyone, #team-split-left is index id (You can see this in Index Item Settings > Advanced > Header).

On Tablet, I see large white space between Luke/Destana - Advisory Board.

Add this to Design > Custom CSS to solve this

/* space betweens image - advisory board */
@media screen and (max-width:900px) and (min-width:641px) {
section#team-split-left .Index-page-content {
    padding-bottom: 0;
}
section#team-split-right .Index-page-content {
    padding-top: 0;
}
}

 

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

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.