How to change the font size for product page on the Jumpstart theme, especially for mobile version?

Highlighted
New Member
8 0 0

Hi guys, 

Does anyone know how to change the font size for the Product Description page on the Jumpstart theme, especially for the mobile version?

The fone size for the Product Page's Description section on Mobile is too small(it looks ok on the Desktop version but very small on the Mobile screen), and I want to enlarge it. However, I searched so many articles and tried to edit/adjust the CSS codes, but none of them work. The mobile font size of the product description page is still too small.

Can anyone/expert guide me how to change this font size of Product Description on the Jumpstart theme for the mobile version?

Do appreciate your great support and guidance

Imge

0 Likes
Highlighted
Astronaut
1085 178 213

Hello,

Thank you for your question. 

Please share your store URL, page URL password (if your store has one) and a screenshot showing the text which you want to change the font size.

I'll help you out to the best of my ability.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
8 0 0

Hi Diego,

Thanks for your kindly reply. My store product page's url is https://superwirelesscharger.com/products/all-in-one-wireless-charger-for-iphone (no password).

Here are the mobile version's screenshot for the product description page. As you can see from the screen below, the description wordings are too small to read for mobile users.

Do appreciate you or anyone who could guide me on how to enlarge the product description's texts on the mobile version.

Imge

mobile screen.png

 

 

 

 

 

 

0 Likes
Highlighted
Astronaut
1085 178 213

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

 

@media (max-width: 600px){
        .product-description p{
        font-size: 20px !important;
    }
}

 
You can change the 20px to any size you'd like, i.e. 30px. It will affect only mobile devices.

Let me know whether it works.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
8 0 0

Hi Diego, 
I have followed your above suggestion to edit the codes and tried to change the font size to 20px, 24 px, 26 px or bigger sizes....., but it still looks the same (the texts are still very small) on the mobile screen and looks like nothing change at all. Do you or anyone know how to fix it?

Do appreciate your guidance.

0 Likes
Highlighted
New Member
8 0 0

Besides, nothing changed on the mobile version after copying and pasting the codes, but I found the texts' font size become very big on the Desktop version now(only on the desktop screen), which is quite weird.

0 Likes
Highlighted
Astronaut
1085 178 213

@Imge send a screen shot of the code plz

 

there should not be a space between the number and px though

20px = correct

20 px = incorrect

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
8 0 0

Hi

I copied the exact same code as yours, not change anything. It didn't change any font size on the mobile version, but the desktop font size did become bigger and look weird on the computer in terms of the proportion. In order not to affect users to check out, I remove the codes from the store so I cant screenshot it again.

 

However, it is the exact code copied from your above codes as you can see above.

0 Likes
Highlighted
Astronaut
1085 178 213

Delete the previous code and try this one:

 [id] .product-description p{
        font-size: 25px !important;
    }

@media (max-width: 600px){
       [id] .product-description p{
        font-size: 20px !important;
    }
}


25px = font size for desktop/large devices
20px = font for mobile/small devices

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
8 0 0

It seems they don't work. The texts on the mobile version are still the same(very small), and also the texts on the desktop will become very big if I apply the desktop codes into the theme.

 

That is weird, is there any way to change/enlarge the mobile's description text size on Jumpstart Theme?

0 Likes