Logo List Section - Need 3 in each row on mobile

Store Design
1

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!

1 Like
2

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 tag

RESULT:

Moeed_0-1736088775911.png
Moeed_0-1736088775911.png348×745 21.6 KB

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

Best Regards,
Moeed

3

@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;}
}
1 Like
4

Thank you SO MUCH!

5

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;
}
}
1 Like
6

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

7

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