A user seeks to modify the IMPACT theme’s ‘Icon With Text’ section to stack three logos vertically on mobile instead of displaying them in a carousel. The theme doesn’t natively support this feature.
Solution Provided:
justify-content: center and align-items: centerFollow-up Issues:
flex-wrap: wrap and width: 31.33% for logo itemsAdditional Query:
A different user asks about implementing a 2-per-row carousel in the Focal theme by the same developer.
Hey there!
I’m using the IMPACT theme by Maestrooo.
I’m looking to ‘stack’ the 3 logos and text on mobile instead of having a carousel.
The theme does’t allow this feature. It’s on the home page and looks like this:
Website is: https://nuts-for-cheese.myshopify.com/
passcode: admin
Any pointers would be great! thank you.
@CarrieT - add this css to the very end of your theme.css file and check
@media screen and (max-width:749px){
.text-with-icons__list{display: flex; flex-direction: column;}
}
Hey @suyash1 !
Thanks for jumping in. I really appreciate your help.
It’s almost there! I just need the items to be centered now 
@CarrieT - add these lines too, justify-content: center; align-items: center;
so it becomes
@media screen and (max-width:749px){
.text-with-icons__list{display: flex; flex-direction: column;
justify-content: center; align-items: center;}
}
THANK YOU!!!
IT’S PERFECT!
I have another question if you have a moment?
Are we able to stack the icons on mobile to be in rows of 3 instead of 2?
This is the page:
https://nuts-for-cheese.myshopify.com/products/artichoke-herb
@CarrieT - try this css, it looks too small though
@media screen and (max-width:749px){
.logo-list{display: flex; flex-wrap: wrap;}
.logo-list__item{width: 31.33%;}
}
@suyash1 This is great
For some reason it’s not working on devices between around 863 and 700 px.
I tried the important tag on each declaration with no luck. Any thoughts?
I have it currently set to any device below 1150px.
I’ve found the issue but can’t seem to over-ride it.
If I change:
@media screen and (min-width: 700px)
.logo-list {
gap: var(–spacing-6);
}
To:
@media screen and (min-width: 700px)
.logo-list {
gap: var(–spacing-3);
}
It seems to work in the inspector tool but can’t seem to get it to stick in my theme CSS.
Thank you in advance!
@CarrieT - hi to set this for devices upto 1024px, try this css, you can comment previous css and add this
@media screen and (max-width:1024px){
.logo-list{display: flex; flex-wrap: wrap;}
.logo-list__item{width: 31.33%;}
}
