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;
}
}

[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:

 

[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!

[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]

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 </head> tag and add the following code above </head> 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. 

[topnewyork · Accepted solution]

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 </head>

<style>
    .footer-list-sections--23963343880474__ss_footer_3_gDEmmk li a {
        font-size: 12px !important;
}
h3.footer-list-title-sections--23963343880474__ss_footer_3_gDEmmk {
    font-size: 2rem !important;
}
h2.title.inline-richtext.h1 {
    font-size: 3rem !important;
}
    .button--secondary {
        font-size: 18px !important;
    }
.link--text {
    font-size: 2.5rem !important;
}
</style>

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