Icon size images on multicolumn Craft theme

Technical Q&A
, ,
1

Hello

I use 2 multicolumns on my home page, I want to add custom css to one of these sections only to reduce the image sizes - I am wanting small icons but they are too big. I am only in draft mode atm, not published yet so I cannot send a link to my store.

Can I add code to the Custom CSS tab for this section only and would anyone know what to add here?

2

You can share a preview link to your store.

3

@moochikid

In Shopify themes, the Custom CSS field inside a section only applies to that specific section, so it won’t affect the other multicolumn section on your homepage.

Custom CSS you can try by adding class in place of your section class .multicolumn-card__image img :


.multicolumn-card__image img {
max-width: 60px;
height: auto;
}

You can adjust the 60px value depending on how small you want the icons to appear.

1 Like
4

Thank you, but that does not change anything. They remain the same size regardless of trying to adjust the px value

5

That’s a wrong code. Should rather be

.multicolumn-card__image-wrapper {
  max-width: 60px;
  height: auto;
}

And only use it in Section settings-> “Custom CSS” to limit it to only this section.

This also does not change the positioning of the image – it will stay at the top left of the column block.

1 Like
7

Thank you! Combined with the other response to change the position this worked perfectly.

8

Thank you so much, this worked! Appreciate your response.

1 Like