Reduce font size on mobile dawn theme

[DasPod]

Hi I have reduced the font sized of various elements on my desktop version of the website using the following code on Base.CSS

/* Font Size Change */
html {
font-size: 8px;
}
.button–secondary {
font-size: 8px;
}
.title {
font-size: 10px;
margin-left: 0px;
}
.product__title {
font-size: 10px;
}
.price {
font-size: 10px !important;
}

Now I check on the mobile version that the font sizes have not changed. Why is that? And can anyone please help me fix that? I want them to be the same across all devices

[gagarwal]

Hi,

find “@media screen and (min-width: 750px) {” lines in base.css, they calculate font sizes for mobile devices

[topnewyork]

@DasPod

Hi , kindly provide your store URL please and if it is password protected, please share the password as well. If you share a screenshot, it will be better.
Thanks!

[vm-web]

@DasPod

Please use media for css like this

/* Font Size Change */
@media screen and (max-width: 767px){
html {
font-size: 8px;
}
.button--secondary {
font-size: 8px;
}
.title {
font-size: 10px;
margin-left: 0px;
}
.product__title {
font-size: 10px;
}
.price {
font-size: 10px !important;
}
}

[DaisyVo]

Hi @DasPod

Thank you for reaching out to the Shopify community. I’d be glad to assist you. Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update?

[DasPod]

@vm-web Thanks for your response. But it is not working. After applying media screen this is the result

Without media screen mobile is the same, but desktop is:

[DasPod]

Hi @DaisyVo @topnewyork

My site is softsavg.com

no passcode.

[DaisyVo]

Hi @DasPod

Now you want to adjust the size of a specific place, you give me a specific image

[DaisyVo]

Hi @DasPod

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
@media screen and (max-width: 768px){
html {
font-size: 8px !important;
}
.button--secondary {
font-size: 8px !important;
}
.title {
font-size: 10px !important;
margin-left: 0px !important;
}
.product__title {
font-size: 10px !important;
}
body .price {
font-size: 10px !important;
}
}
{% endstyle %}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[vm-web]

@DasPod

Please add this code base.css bottom of the file

@media screen and (max-width: 768px){
html {
font-size: 8px !important;
}
.button--secondary {
font-size: 8px !important;
}
.title {
font-size: 10px !important;
margin-left: 0px !important;
}
.product__title {
font-size: 10px !important;
}
body .price {
font-size: 10px !important;
}
}

[DasPod]

Sadly, still the same result!

[topnewyork]

Hi @DasPod

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[LisaKK]

@LisaKK

Facing same issue, would you mind sharing this code again?

Facing same issue, would you mind sharing this code [email removed]topnewyork

[Moeed]

Hey @LisaKK

Feel free to let me know about your issue along with your store URL and I can have a look.

Best,
Moeed

[LisaKK]

HI, I’m using dawn 15.4.0, product title on the mobile version is too large,trying to reduce the font size of the product title.

[Moeed]

Share your store URL so I can provide you a code accordingly.

Best,
Moeed

[LisaKK]

Thanks! DM you the url

[Moeed]

Hey @LisaKK

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
@media screen and (max-width: 767px) {
.card__heading {
    font-size: 10px !important;
}
}
</style>

RESULT:

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

[LisaKK]

Huge thanks! And what if want to change the title font size in the product page?

[LisaKK]

Sorry to mention, change the title font size in the product page on mobile version.