Logo list animation

Solved

Logo list animation

JarnoBroekkamp
Excursionist
72 0 10

Hi everyone,

 

To showcase the stores where our product is available, we use the logo list section. But they only showcase 3 per row, we want 4 to be showcased at all time but that it animates to showcase the others.

 

Url is www.ateliercharisma.com

 

Image 20-06-2024 at 15.58.jpeg

Accepted Solutions (2)

suyash1
Shopify Partner
10716 1324 1700

This is an accepted solution.

@JarnoBroekkamp - please add this css to the very end of your theme.css file and check

.section-stack .logo-list{grid: auto / repeat(4, minmax(0, 250px)) !important;}
Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

View solution in original post

BSS-TekLabs
Shopify Partner
2401 695 831

This is an accepted solution.

- Here is the solution for you

- Please follow these steps:

step.png

- Then find the theme.css file.

- Then add the following code at the end of the file and press 'Save' to save it.

.section-stack .logo-list {
 grid: auto / repeat(4, minmax(0, 250px)) !important;
}

- Please add the above code to the last line of the theme.css file.

- Here is the result you will achieve:

BSSTekLabs_0-1718895281889.png

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 6 (6)

suyash1
Shopify Partner
10716 1324 1700

This is an accepted solution.

@JarnoBroekkamp - please add this css to the very end of your theme.css file and check

.section-stack .logo-list{grid: auto / repeat(4, minmax(0, 250px)) !important;}
Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
JarnoBroekkamp
Excursionist
72 0 10

Can u also help me get it right on mobile, that is animates instead of showcasing in 2 rows?

 

suyash1
Shopify Partner
10716 1324 1700

@JarnoBroekkamp - it will look too small 

 

suyash1_0-1718976423118.png

 

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
JarnoBroekkamp
Excursionist
72 0 10

and if 3 are being showcased standard in an animation that after 5 seconds changes to the others?

 

BSS-TekLabs
Shopify Partner
2401 695 831

This is an accepted solution.

- Here is the solution for you

- Please follow these steps:

step.png

- Then find the theme.css file.

- Then add the following code at the end of the file and press 'Save' to save it.

.section-stack .logo-list {
 grid: auto / repeat(4, minmax(0, 250px)) !important;
}

- Please add the above code to the last line of the theme.css file.

- Here is the result you will achieve:

BSSTekLabs_0-1718895281889.png

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
JarnoBroekkamp
Excursionist
72 0 10

Can u also help me get it right on mobile, that is animates instead of showcasing in 2 rows?