Change Mobile Font Size for collection products

Technical Q&A
1

How do I change the mobile font size for collection products? Been trying to change it in Edit Code but no luck.

Website URL - https://avokitchen.com/

2

Hi @Yusa1
Its SideNode! We will be happy to help you today.

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

@media screen and (min-width: 750px) {
h3.card-information__text.h3 {
    font-size: 14px;
}
.price.price--on-sale {
    font-size: 14px;
}

}

If I was able to assist you, please remember to give it a Like and Mark it as the Solution!
Let me know if need further assistance
Regards,
SideNode

3

Hey @SideNode ,

I appreciate the help but I enter your code and I don’t think it really fixes my problem. I want the words to don’t stack over each other. Like this other website shown below

IMG_4098 (1).jpg
IMG_4098 (1).jpg1170Ă—2532 215 KB

IMG_4097 (1).jpg
IMG_4097 (1).jpg1170Ă—2532 205 KB

4

hi @Yusa1
Its SideNode! We will be happy to help you today.
In the previous code, I accidentally provided the CSS for desktop. Here is the updated version of the code.

@media screen and (max-width: 749px) {
h3.card-information__text.h3 {
    font-size: 12px;
}
.price.price--on-sale {
    font-size: 12px;
}

}

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

You can see the change now.

SideNode_0-1688475527150.png
SideNode_0-1688475527150.png605Ă—535 52.4 KB

Please feel free to let me know if there’s anything else you need.

If I was able to assist you, please remember to give it a Like and Mark it as the Solution!
Let me know if need further assistance
Regards,
SideNode

1 Like
5

Hey @SideNode ,

Thanks a lot definitely did help. Are you able to change the “PRICE Number” to bold.

and put the Title font for mobile just slightly smaller.

IMG-4104.jpg
IMG-4104.jpg3024Ă—4032 4.06 MB

6

hi @Yusa1

Its SideNode! We will be happy to help you today.

You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->base.css>

@media screen and (max-width: 749px) {
h1.product__title {
    font-size: 24px;
}
span.price-item {
    font-weight: bold;
}
}

If I was able to assist you, please remember to give it a Like and Mark it as the Solution!
Let me know if need further assistance
Regards,
SideNode

1 Like
7

Hey Thanks ! But it only shows on mobile. You think you could provide the code for mobile and PC.

8

hi @Yusa1
Its SideNode! We will be happy to help you today
I specialize in developing code for mobile devices exclusively and do not provide code for desktop devices. However, if you need code that works for both mobile and desktop, you can easily apply the code I provide.

h1.product__title {
    font-size: 24px;
}
span.price-item {
    font-weight: bold;
}

Let me know if need further assistance
Regards,
SideNode

1 Like