How to stack 'Icon With Text' section on mobile using IMPACT theme?

[CarrieT]

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.

[suyash1]

@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;}
}

[CarrieT]

Hey @suyash1 !
Thanks for jumping in. I really appreciate your help.
It's almost there! I just need the items to be centered now 🙂

 

[suyash1 · Accepted solution]

@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;}
}

[CarrieT]

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

[suyash1]

@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%;}
}

[CarrieT]

@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.

[CarrieT]

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!

 

[suyash1]

@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%;}
}

[JoaoRomo]

Hi, im using Focal by Maestroo. is it possible to have it in carousel but 2 in a row 

similar to this