Multicolumn section adapt to mobile version

[isabellemaria]

Hi there,

on my page www.taneraskin.com (dawn theme) I have a multicolumn section which looks nice on desktop version, but in mobile I would like to have it exactly the same:

- Display all 4 columns next to eachother

- Icons smaller (like on desktop)

- Smaller font to make this work

Do you have an idea how to do it?

Best regards,

Isabelle 

[KetanKumar]

@isabellemaria 

sorry but this not good this bcz user can't proper read all text so may your can used unable slider on mobile its allow your theme 

[Made4uo-Ribe · Accepted solution]

Hi @isabellemaria 

Seems like you didnt solver yet this columns, you can add this code. 

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:

@media only screen and (max-width: 989px){
.background-none .multicolumn-list:not(.slider) .center .multicolumn-card__info {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}
.multicolumn-card__info .rte {
    font-size: 1.3rem;
}
.multicolumn-card__info h3 {
    font-size: 1.5rem;
}
.section-template--19921507778828__multicolumn_ggPawF-padding .multicolumn-card__image-wrapper--third-width {
    max-width: 38px !important;
}
}

And Save. 

result:

Im willing to fix it more on your previous post, but you didnt even notice my reply there. 

[isabellemaria]

I see, you are right. Do you know why the code I have now works everywhere, but does not make my icons smaller on this page? https://taneraskin.com/collections/produkte 

[Made4uo-Ribe]

For the width, I only call the specific multi column. This page have different multi column.

.multicolumn-card__image-wrapper--third-width {
    max-width: 15%;
}
@media only screen and (max-width: 989px){
.background-none .multicolumn-list:not(.slider) .center .multicolumn-card__info {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}
.multicolumn-card__info .rte {
    font-size: 1.3rem;
}
.multicolumn-card__info h3 {
    font-size: 1.5rem;
}
.multicolumn-card__image-wrapper--third-width {
    max-width: 38px !important;
}
}

Reaplce on this one then. 

Include also the yesterday's code.