Mobile - 2 Image / Text Blocks per row

Hello community,

I am currently building a team page for a client and I am building the page using image blocks & text blocks. I am happy with the desktop design and now I need to refine the mobile version, which currently only displays one image per row. I would like two rows of images, with the relevant text for that picture sit beneath it. 

Here's desktop currently:

Mobile view:

I was wondering how I can have two images next to each other on mobile e.g Alex & Alexi, and there names sit below them. 

Any help appreciated - If you need access to my site, please let me know.

Can you share link to this page?

If there is a way to have two images per row, I can use image captions instead of text blocks which might make things easier? 

Messaged regarding link - Thanks!

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1573641271213_15311+.row>.col {
    width: 50% !important;
}
div#block-yui_3_17_2_1_1573641271213_15311+.row {
    display: flex;
    flex-wrap: wrap;
}
}

@tuanphan Perfect thanks man! I assume to apply it to the rest of the images I just need to use the block id's like you have?

 @tuanphan Would you help me with this as well? Link is here. Password is 185fff. Thank you!!

On 3/5/2021 at 7:19 AM, SSong said:

 @tuanphan Would you help me with this as well? Link is here. Password is 185fff. Thank you!!

Need to access your backend to change to 2 items/row on mobile. If you can add me as a contributor, I can test code easier.

If you want to change to 3 items/row on mobile, add this to Design > Custom CSS

/* pickup delivery test 3 items row */
@media screen and (max-width:767px) {
div#page-6041242f7ae35f02c09f1c17>.row:nth-child(n+2) .span-4 {
    width: 33.33% !important;
    float: left !important;
}
div#page-6041242f7ae35f02c09f1c17>.row:nth-child(n+2) .span-4 * {
    font-size: 10px;
}
}

On 3/7/2021 at 1:38 AM, tuanphan said:

Need to access your backend to change to 2 items/row on mobile. If you can add me as a contributor, I can test code easier.

If you want to change to 3 items/row on mobile, add this to Design > Custom CSS

/* pickup delivery test 3 items row */
@media screen and (max-width:767px) {
div#page-6041242f7ae35f02c09f1c17>.row:nth-child(n+2) .span-4 {
    width: 33.33% !important;
    float: left !important;
}
div#page-6041242f7ae35f02c09f1c17>.row:nth-child(n+2) .span-4 * {
    font-size: 10px;
}
}

 

Just direct messaged you.

On 3/10/2021 at 2:08 AM, SSong said:

Just direct messaged you.

Hi. Sorry. Recently overloaded. You can message me again if you haven't still solved this yet.