2 column image on mobile

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

You want, on mobile

Image (left) - Title/Sub title (right)

Is this right?

Hi @tuanphan! I'm hoping for 2 images side by side with the respective texts under each person's name like this on mobile

thank you!!

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