How can I adjust icon size and text alignment in mobile multicolumn section?

[jk888]

Hi!

I have a question around Mobile version for Multicolumn section

• How can I make the icon images a little bigger on mobile? It looks good on desktop but.. on mobile, the icon images look too small.

• How can I make the body text alignment to be left-aligned? There’s 4 body texts below the icons. I just want them to be left-aligned.

Thank you!

[harivishwakarma]

Hallo @jk888

You can add code by following these steps to change

1. Go to Online Store → Theme → Edit code > assets > base.css

paste below code at bottom(base.css)

@media only screen and (max-width: 767px) {
.multicolumn-card__image-wrapper--third-width {
width: 100%;
}
.multicolumn-card__info {
text-align: left;
padding: 6px !important;
}
}

If you require any further information, feel free to contact me.

Best regards,

[Ujjaval]

@jk888
Add below css

@media (max-width:768px)
{
.multicolumn-card__image-wrapper--third-width {
    width: 100% !important;
}
.multicolumn-card__info {
    text-align: left !important;
}
}

[harivishwakarma]

Hallo @jk888 Please like and accept solution.

[GemPages]

Hello @jk888 ,

It’s the GemPages Support Team and we are glad to assist you today!

I would like to give you the recommendation to support you so kindly follow the steps below:

1. Go to Online Store > Theme > Edit code of your current theme

2. Open your theme.liquid theme file

3. Paste the below code before

Let us know how it works for you.

Best regards,
GemPages Support Team

[PageFly-Victor]

Hi @jk888

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

Hope this answer helps.

Best regards,

Victor | PageFly