Creating 5 equal width image blocks on one row

Site URL: https://www.mindfulmetherapy.com/behavior-therapy

Hoping someone can help me - I have 5 images in a row and I am trying to get them to be equal height. See below for the code I am using, it is not working.

The password to access the page is p4ssword

//equal size blocks//
#5f561a6cfab9b365a25a1e21 {margin-left: auto; margin-right: auto; display: block; width: 20%;}

I was able to find a solution, so I am sharing it here in case anyone runs into a similar issue:

Important notes, your section ID will need to be updated with your own ID, and you need each image block authored to be in either 3 columns or 2 columns for this to work. If you have multiple sections where you want this to work, you will need to add this code for each section.

//equal size blocks//
section[data-section-id="5f561a6cfab9b365a25a1e21"] {
  .sqs-col-3, .sqs-col-2 {
    width: 20% !important; 
  }
}

hi how do i adjust this in my mobile view?

2 hours ago, ArvinPaul said:

hi how do i adjust this in my mobile view?

Can you share link to your site? We can check easier

https://coconut-whale-dm99.squarespace.com
password: 123456

On 5/25/2021 at 10:13 AM, ArvinPaul said:

https://coconut-whale-dm99.squarespace.com
password: 123456

You mean The process boxes? I see they same height here

3 hours ago, tuanphan said:

You mean The process boxes? I see they same height here

yes they are same height in desktop but in mobile view it looks very small and weird, I need it to look normal 

3 hours ago, ArvinPaul said:

yes they are same height in desktop but in mobile view it looks very small and weird, I need it to look normal 

You want them in same row, or 2-3 icons/row?

i want them in same row @tuanphan

On 6/5/2021 at 3:11 PM, ArvinPaul said:

i want them in same row @tuanphan

Hi. If same row, it looks very small. Add this to Design > Custom CSS

/* Process boxes same row */
@media screen and (max-width:767px) {
div#block-c3ddfdbdb414ab820848+.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
[data-section-id="60ab4676f86d4d759f216e43"] .content-wrapper {
    padding-left: 0 !important;
}
}

On 9/7/2020 at 9:20 AM, Sienawalker said:

I was able to find a solution, so I am sharing it here in case anyone runs into a similar issue:

Important notes, your section ID will need to be updated with your own ID, and you need each image block authored to be in either 3 columns or 2 columns for this to work. If you have multiple sections where you want this to work, you will need to add this code for each section.

//equal size blocks//
section[data-section-id="5f561a6cfab9b365a25a1e21"] {
  .sqs-col-3, .sqs-col-2 {
    width: 20% !important; 
  }
}

 

 This solution no longer works, unfortunately. Anybody have any success overriding Sqsp's column widths?

On 4/19/2022 at 9:08 PM, holagabriela said:

 This solution no longer works, unfortunately. Anybody have any success overriding Sqsp's column widths?

Can you share link to page where you have problem? We can help easier

4 hours ago, tuanphan said:

Can you share link to page where you have problem? We can help easier

Sure, thank you! https://plenitud-7-1.squarespace.com/welcome#block-yui_3_17_2_1_1645100430188_13458 (pw: community)

On 4/23/2022 at 2:12 AM, holagabriela said:

Sure, thank you! https://plenitud-7-1.squarespace.com/welcome#block-yui_3_17_2_1_1645100430188_13458 (pw: community)

I remember I sent code yesterday

Add to Design > Custom CSS

@media screen and (min-width:992px) {
div#page-section-620e3e4177a02e7f7caa16ad>.row:nth-child(2)>.col {
    width: 20% !important;
}}