Refresh Theme - Multicolumn Image Resizing

Store Design
,
1

Hi, I am trying to resize the images in the multicolumn section. It looks like the smallest they can go is “1/3 the width” of the column. I would like them to be very small icons to represent the content below them. The images themselves I have sized to 30x30 but they’re blowing up larger when I add them.

Can anyone help me to resize them? I found a very similar question asked and solved previously but the solution wasn’t specific enough as to where the changed copy went and after trying a few different spots and failing, I figured I would ask here! URL is www.vommat.com. Thank you!

2

@mbor1 - you can add this css to the very end of base.css file and check

#shopify-section-template--15795142688939__multicolumn-1 .multicolumn-card__image{
width: 30px;    height: 30px;}
3

See if this works?

img.multicolumn-card__image {
    max-width: 30px !important;
    max-height: 30px !important;
    margin-top: 50%;
}

screenshot 2022-November- 16.jpg
screenshot 2022-November- 16.jpg1533×761 91.4 KB

Great idea for a shop btw!

4

This worked but it mixed up the spacing so they weren’t centered anymore and there was a big gap before the text below. I reverted back for now but thank you!

5

Thank you! Where exactly would I paste this in? :grimacing:

6

@mbor1 - to the very end of base.css file

7

Thanks to both of you! I added:

img.multicolumn-card__image {
max-width: 30px !important;
max-height: 30px !important;
margin-top: 50%;
}

to the very end of the base.css file. We are good!!

8

This is exactly what I am after, except for larger icons.

But when I paste the code into the base.css file and change the px sizes I do not see any difference.

I’m not a coder but how does this get to be responsive?

9

I did it but there is a big gap in each corner, how can I fix?

I mean that the pic is in the center, but there is a big distance between the pic and the text

10

Hi! Did you find a solution to this? I am having the same problem