How to change the Mobile heading font for a specific section?

Store Design
1

Hi!

I’ve been tinkering around with the design of our landing page and was trying to change the font for mobile devices for a specific section “Multicolumn-new”. Anyways I added a heading for the section and the heading font is too small.

Any tips on how to increase it for mobile users for that specific section? I added screenshots which demonstrates the problem. The URL is: https://bonebox.fi

Best,

Oscar

image0.jpeg
image0.jpeg1125×2436 187 KB

1 Like
2

Hello @BoneBox

I would like to give you a solution to support you:

  1. Go to Online Store-> Theme-> Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before :
@media(min-width: 280px) and (max-width :767px){ .multi-col-new .title { font-size: 48px; } }
3

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >section-multicolumn.css and paste this at the bottom of the file:
@media (max-width: 768px) {
.multi-col-new .multicolumn-list h3 {
font-size: 25px;
}
.multicolumn-card__info p {
font-size: 20px;
}
}

ZestardTech_0-1670245006896.png
ZestardTech_0-1670245006896.png1148×869 131 KB

4

Many thanks! That solved the issue.

-Oscar

1 Like