What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Change Mobile Font Size for collection products

Solved

Change Mobile Font Size for collection products

Yusa1
Excursionist
46 0 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/

Accepted Solutions (2)
SideNode
Shopify Partner
159 38 42

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

SideNode_0-1688475527150.png

 

 



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

If helpful, please Like and Accept this Solution to help others
SHOPIFY APP DEVELOPMENT | BOOK FREE SHOPIFY CONSULTATION

View solution in original post

SideNode
Shopify Partner
159 38 42

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




If helpful, please Like and Accept this Solution to help others
SHOPIFY APP DEVELOPMENT | BOOK FREE SHOPIFY CONSULTATION

View solution in original post

Replies 7 (7)

SideNode
Shopify Partner
159 38 42

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

If helpful, please Like and Accept this Solution to help others
SHOPIFY APP DEVELOPMENT | BOOK FREE SHOPIFY CONSULTATION
Yusa1
Excursionist
46 0 1

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_4097 (1).jpg

SideNode
Shopify Partner
159 38 42

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

SideNode_0-1688475527150.png

 

 



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

If helpful, please Like and Accept this Solution to help others
SHOPIFY APP DEVELOPMENT | BOOK FREE SHOPIFY CONSULTATION
Yusa1
Excursionist
46 0 1

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

SideNode
Shopify Partner
159 38 42

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



If helpful, please Like and Accept this Solution to help others
SHOPIFY APP DEVELOPMENT | BOOK FREE SHOPIFY CONSULTATION
Yusa1
Excursionist
46 0 1

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

SideNode
Shopify Partner
159 38 42

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




If helpful, please Like and Accept this Solution to help others
SHOPIFY APP DEVELOPMENT | BOOK FREE SHOPIFY CONSULTATION