Make images in multicolumn section smaller

[isabellemaria]

Hi there,

I want to make the following icons on my site www.taneraskin.com SMALLER and centered. How can I do it? I use Dawn theme.

Also, if you know, how can I display the 4 columns on MOBILE exactly like they look on the desktop version? All next to eachother, but in smaller size.

Best,

Isabelle

[Made4uo-Ribe · Accepted solution]

Hi @isabellemaria 

This if for the icon smaller. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.section-template--19921507778828__multicolumn_wnBigh-padding .multicolumn-card__image-wrapper--third-width {
    width: 25%;
}

And Save. 

result:

The current size now is 33%.

And for the changes on the mobile, I limit the screen size to 550px in  4 columns cause it not user friendly. 

Same Instruction. 

@media (min-width: 550px) and (max-width: 989px){
    .multicolumn-card__image-wrapper--third-width {
    width: 50%;
}
ul#Slider-template--19921507778828__multicolumn_wnBigh {
    display: grid;
     grid-template-columns: repeat(4, 1fr);
    width: auto;
    gap: 10px;
}
.section-template--19921507778828__multicolumn_wnBigh-padding .multicolumn-list:not(.slider) .center .multicolumn-card__info {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
}

And Save. 

Result:

[isabellemaria]

The first works, but the second for the mobile layout is not working. Can you have a look again?

[Made4uo-Ribe]

I make some changes, the padding didnt work so I add !important. Please replace the code.Thanks!