Solved

Make images in multicolumn section smaller

isabellemaria
Trailblazer
197 1 25

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.

 

Bildschirmfoto 2024-06-06 um 22.15.37.png

 

Best,

 

Isabelle

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
6419 1539 1909

This is an 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:

Made4uoRibe_0-1717706896054.png

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. 

Made4uoRibe_1-1717707044440.png

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:

Made4uoRibe_2-1717707164207.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

View solution in original post

Replies 3 (3)

Made4uo-Ribe
Shopify Partner
6419 1539 1909

This is an 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:

Made4uoRibe_0-1717706896054.png

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. 

Made4uoRibe_1-1717707044440.png

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:

Made4uoRibe_2-1717707164207.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
isabellemaria
Trailblazer
197 1 25

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

Made4uo-Ribe
Shopify Partner
6419 1539 1909

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.