Solved

Multicolumn section adapt to mobile version

isabellemaria
Trailblazer
201 1 26

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

 

Bildschirmfoto 2024-06-07 um 14.35.31.png

Do you have an idea how to do it?

 

Best regards,

Isabelle 

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
6487 1554 1925

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

Made4uoRibe_0-1717771845880.png

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

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 4 (4)

KetanKumar
Shopify Partner
36905 3641 11986

@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 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Made4uo-Ribe
Shopify Partner
6487 1554 1925

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

Made4uoRibe_0-1717771845880.png

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

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
201 1 26

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
Shopify Partner
6487 1554 1925

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. 

Made4uoRibe_0-1717777549950.png

Include also the yesterday's code. 

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.