Need to change decription font size

[VaishaliSahu]

The font size of my product description on product pages and metafields blocks that I have inserted are different. I need to make them all of same font size. This is my listing: 

https://www.odhanon.in/products/cute-2024-summer-top-for-women

[VaishaliSahu]

More update on this. I have inserted this particular code at the bottom of my base.css file (came across this resolution on another shopify query post). I have two different product templates. The font size of both remains unchanged. I am not able to figure our what am I doing wrong here.

.product__info-wrapper .product__description * {
    font-size: 16px !important;
}

@media screen and (max-width: 991px) {
  .product__info-wrapper .product__description * {
    font-size: 15px !important;
  }
}

@media screen and (max-width: 480px) {
  .product__info-wrapper .product__description * {
    font-size: 13px !important;
  }
}

[LizHoang]

Hi @VaishaliSahu 

You can follow this instruction:

1. Go to Shopify > Theme > Customize

2. Copy and paste this code on Theme settings > Custom CSS section

.rte ul {
    list-style-type: disc;
    text-align: left;
    font-size: 14px;
}

.rte p {
    margin-bottom: .75em;
    margin-top: .75em;
    font-size: 14px;
}

Result :

I hope it helps

[VaishaliSahu]

Hey @LizHoang, thanks for this! I have two follow up questions:

1. If I use this, will the font size adjust according to different media screens?

2. Text of my metafield block i.e. Wash Care on the above listing is not aligning left. How can I adjust that?

[LizHoang]

Hi @VaishaliSahu 

2. For the Wash care, you can try this code :

.template-product .rte {
    text-align: left;
 }

[LizHoang]

Hi again @VaishaliSahu 

May I know that you want to adjust different font size per media screen right? 

[VaishaliSahu]

Yes yes @LizHoang , that is what I am looking for.

[LizHoang]

Hi @VaishaliSahu , 

For mobile font size, you can try this code : 

@media only screen and (max-width: 800px) {
.rte ul {
    list-style-type: disc;
    text-align: left;
    font-size: 14px;
}

.rte p {
    margin-bottom: .75em;
    margin-top: .75em;
    font-size: 14px;
}
}

[VaishaliSahu]

@LizHoang so should I add this right after the first code that you sent?

[VaishaliSahu]

Yes sure @LizHoang ,

PC: 16px

Phone: 13px

Tablet: 14px

[LizHoang · Accepted solution]

For Mobile : 

@media only screen and (max-width: 800px) {
.rte ul {
    font-size: 13px;
}

.rte p {
    font-size: 13px;
}
}

For Tablet : 

@media only screen and (min-width: 820px) and (max-width: 820px) and (min-height: 1180px) and (max-height: 1180px) {  
    .rte ul {  
        font-size: 14px;  
    }  

    .rte p {  
        font-size: 14px;  
    }  
}  

For PC: 

.rte ul {
    font-size: 16px;
}

.rte p {
    font-size: 16px;
}

yes, please paste it below the code I have sent. For the PC, that I have sent before, you just need to edit the pixels to 16px 

[VaishaliSahu]

Got it! Thank you so much 🙂