Logo List Section - Need 3 in each row on mobile

[highvibecollect]

Hey there!

I need CSS to create 3 logos in a row on the mobile version. Can someone help me write the code for the first section titled "Additional Pattern Options - Flowers"? Once I get the first code, I should be able to do the rest of them! 

https://calliopequilts.com/products/test-product

Thank you so much!

[Moeed · Accepted solution]

Hey @highvibecollect 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find password.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.logo-list__logo {
    flex: 0 0 calc(33% - 40px) !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[highvibecollect]

Thank you SO MUCH!

[highvibecollect]

Is there a way to change the amount of space between the rows and columns?

[suyash1]

@highvibecollect please add this css to the very end of your base.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> base.css

@media screen and (max-width:749px){
.logo-list__logo {flex: 0 0 calc(33.33% - 40px) !important;}
}

[devcoders]

Hello @highvibecollect 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/main.css Add the provided code at the end of the file.

@media screen and (max-width: 767px) {
.logo-list__logo {
flex: 0 0 calc(33% - 40px) !important;
}
}

[highvibecollect]

Is there a way to change the amount of space between the rows and columns?