Add more Icons to Icons Row

[MollieHammond]

Hi all, 

Hope everyone is well. I was wondering if someone could please help me enable 7 icon rows in the icons row just below out slideshow image on our websites home page?

I have tried to find it in the theme CSS but perhaps i'm missing something. 

Theme: Palo Alto

Website: https://www.coffee.prestigerepairs.com.au/

Any help would be greatly appreciated. 

Thank you!

[suyash1]

@MollieHammond  option  will not be in css, please open this page in customize settings and check if you have an option to add more icons to this row, if no then code editing will be needed

[MollieHammond]

Hey, yeah unfortunately it's not in the settings. That's why i'm here. I know a percentage should just need to be edited inthe code but I am unsure where to find it. 

[suyash1]

@MollieHammond  you can follow steps given by @Guleria , this will make it 7 column structure, but if you want to add more icons then may need to edit code as option for more than 4 is not available in customize settings

[Guleria]

Hello @MollieHammond ,

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your theme.css file and paste the following code at the bottom:

@media only screen and (min-width: 768px) {
.icons-row__slider.items--4 {
    grid-template-columns: repeat(7,minmax(0,1fr)) !important;
}
}

And if you need dynamic option in section to add more than 4 icons please share the code of file sections -> icons-row.liquid

Regards

Guleria

[MollieHammond]

Hey! Thanks so much but that only lets me put 6 icons and titles in. I did that and now it's off center. 

https://www.coffee.prestigerepairs.com.au/

[suyash1]

@MollieHammond - change 7 to 6 and check

[MollieHammond]

That still only allows 6 but it's much more centred and better looking now. We should be okay with just six 🙂 thank you so much!

You don't happen to know why heading text comes up white but anything input in the 'text' section comes up black do you?

Heading 4 is the perfect size but it just comes up black. 

[Guleria]

You can override it with another line of css code

.icons-row__text h5, .icons-row__text p
Specificity: (0,1,1)
 {
    color: #fff;
}

[MollieHammond]

Hey, 

thanks so much for responding. This didn't work though. I tried at the bottom of the theme liquid and also in the custom CSS on the front editor in the section. 

[MollieHammond]

Also putting in the 6 rows made the padding at the bottom large, even with 0 padding selected. Is this fixable? Sorry to be a pain. 

[Guleria · Accepted solution]

Sorry previous css code was wrong, please try this one to change the color

.icons-row__text *
 {
    color: #fff;
}

Padding issue, make sure each text block with an icon doesn't have any space. Empty space converted into <br> tag and create spaces which look like padding. 

[MollieHammond]

That worked, SERIOUSLY THANK YOU so so much.