Change Mobile Font Size for collection products

[Yusa1]

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/

[SideNode · Accepted solution]

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.

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

[SideNode]

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

[Yusa1]

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

 

 

 

[SideNode · Accepted solution]

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.

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

[Yusa1]

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.

[SideNode]

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

[Yusa1]

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

[SideNode · Accepted solution]

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