Trying to make Logo list using multicolumn, but the image size & spacing is not symmetric

[SweatFree]

 Is there a way to make it look nice like this: https://cdn.shopify.com/s/files/1/0268/7978/7090/files/press_5_lines_480x480.png?v=1713773369

My website is www.sweatfree.co

The password is sweatfree123

If you scroll to the very bottom then right above the footer is the multicolumn. If you could please advice on how to make images symmetric and same size.

[Dan-From-Ryviu]

Hi @SweatFree 

You can try to add this code to Custom CSS of that Multiple column and check again.

.multicolumn-list {    
    max-width: 600px;
    margin: 0 auto;
    row-gap: 24px;
}

[SweatFree]

Hi @Dan-From-Ryviu just added the code. I like it better than before, but now everything looks very small & a little weird. Please check. If you have any advice on how to make it look like this: https://cdn.shopify.com/s/files/1/0268/7978/7090/files/press_5_lines_480x480.png?v=1713773369

[Dan-From-Ryviu]

Please add this additional code 

.media img { width: 100% !important; }

And add more column in your Multicolum section 

[SweatFree]

@Dan-From-Ryviu it cuts the logo now. Feel free to check it.

[Dan-From-Ryviu]

Could you try to change Image ratio option of Multiplecolum section and check? 

[SweatFree]

Yes, I already tried that. If I do anything that is not adapt to image, then it cuts through the logo.

[Dan-From-Ryviu]

So please update this code 

.multicolumn-list {    
    max-width: 600px;
    margin: 0 auto;
    row-gap: 24px;
}

To this 

.multicolumn-list {    
    max-width: 800px;
    margin: 0 auto;
    row-gap: 24px;
}

And remove this code 

.media img { width: 100% !important; }

[SweatFree]

Hi @Dan-From-Ryviu first of all, thank you for this! Few quick questions:

1) any advice to make the smaller sizes bigger?

2) All these images are left aligned. Any advice on how to make it aligned centered?

3) Any advice on how to make the entire section full width, just like the section above is full width?

4) Finally, any advice on how to get the multicolumn text centrally aligned?

[Sweans]

Hi @SweatFree ,

Could you please add the below css code in your theme.css file.

#shopify-section-template--14927606710354__multicolumn_Uidn7r .multicolumn-list__item .media--adapt .multicolumn-card__image {
  max-width: 60%;
  object-fit: contain;
}
#shopify-section-template--14927606710354__multicolumn_Uidn7r .multicolumn-list__item, .grid--4-col-desktop .multicolumn-list__item {
  margin-bottom: 25px;
}

Result:-

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

[SweatFree]

Hi @Sweans first of all, thank you for this! Few quick questions:

1) any advice to make the smaller sizes bigger?

2) All these images are left aligned. Any advice on how to make it aligned centered?

3) Any advice on how to make the entire section full width, just like the section above is full width?

4) Finally, any advice on how to get the multicolumn text centrally aligned?

Thank you again, @Sweans !

[Sweans]

Hi @SweatFree ,

1) any advice to make the smaller sizes bigger?

Sweans: We could see some blank space around the small images. It would be great if you could crop the images and reupload to the website.

2) All these images are left aligned. Any advice on how to make it aligned centered?

Sweans: Could you please add the below css code in the theme.css file.

#shopify-section-template--14927606710354__multicolumn_Uidn7r .media.media--transparent.media--adapt {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 0 !important;
  height: 130px;
}
#shopify-section-template--14927606710354__multicolumn_Uidn7r .multicolumn-list__item .media--adapt .multicolumn-card__image {
  position: relative;
  object-fit: contain;
}

Result:-

3) Any advice on how to make the entire section full width, just like the section above is full width?

Sweans: Could you please add the below css code in the theme.css file.

#shopify-section-template--14927606710354__multicolumn_Uidn7r .page-width {

  max-width: 100%;

}

Result:-

4) Finally, any advice on how to get the multicolumn text centrally aligned?

Sweans: Could you please add the below css code in the theme.css file.

#shopify-section-template--14927606710354__multicolumn_Uidn7r .multicolumn .title {
  margin: 0 auto;
}

Result:-

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans