Happening now | Office Hours: Customizing Your Theme With Moeed | Ask your questions now!

make price font size smaller mobile only

Solved

make price font size smaller mobile only

sixdreamz
Explorer
110 0 37

hey, i would like to change to font size of the prize for mobile layout only

 

can you help me?

 

sixdreamz_0-1727425051027.png

 

 

url: sixdreamz.com

password: sdc2003

Accepted Solution (1)

Rahul_dhiman
Shopify Partner
849 164 182

This is an accepted solution.

HEllo @sixdreamz 
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-price.css
add this code at the end of the file.

@media screen and (max-width: 749px) {
.price__regular .price-item--regular {
font-size: 12px !important;
}

result
7.png

If this was helpful, hit the like button and accept the solution.
Thanks

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here


BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages

View solution in original post

Replies 4 (4)

Tech_Coding
Shopify Partner
519 133 131

Hello @sixdreamz 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
   .price__regular .price-item--regular {
        font-size: 12px !important;
    }
}
</style>

Tech_Coding_0-1727425465995.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

Rahul_dhiman
Shopify Partner
849 164 182

This is an accepted solution.

HEllo @sixdreamz 
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-price.css
add this code at the end of the file.

@media screen and (max-width: 749px) {
.price__regular .price-item--regular {
font-size: 12px !important;
}

result
7.png

If this was helpful, hit the like button and accept the solution.
Thanks

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here


BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages

BSSCommerce-B2B
Shopify Partner
1972 564 568

@sixdreamz ,
Step 1: Go to Admin -> Online store -> Theme > Edit code

Step 2: Search for the file theme.liquid

Step 3: Add this code before </body> tag

<style>
@media screen and (max-width: 749px) {
.card-information .price * {
   font-size: 10px !important;
}
</style>

Result:

BSSCommerceB2B_0-1727425811849.png

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

ZestardTech
Shopify Partner
6148 1100 1476

Hello There,

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

 

@media screen and (max-width: 767px){
.price-item.price-item--regular {
font-size: 10px !important;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing