How to change font size in product description

[chenle]

My product description is too small and paragraph heading1-6 doesn't help much.

How to change the font size? I would like a little bigger font size.

I tried several solutions that were offered here adding code to assets/theme-style.scss.liquid or assets/theme-config.scss.liquid didn't do anything to the description.

I think I am using: 

Ss_AaShop1.0.1

Design and support by Magentech

(I found it when went to theme customization)

Thank you

[r8r]

@chenle – this seems to be your theme … otherwise a link to your store is always helpful … So, it's a bit of a guess, but the following CSS should help and give you an idea how to change that font size (according to the code on this page😞

.product-single .description {
  font-size: 2rem;
}

 Mario

[chenle]

Hi Mario,

Yes, you were right about my theme, it is actually - Ss-aashop-home1

As for the css, I am new in this and I didn't exactly understand where to put the code.

I went to the code section of the theme but couldn't find anything named: product-single .description 

I have product.liquid if it helps...(just hope it will not spill on the carpet when touching it..hehe)

thanks

[chenle]

I tried to look for it (without any knowledge) 

I found this inside theme-style.scss.liquid 

}
.product-single__description{
margin: 0 0 10px; line-height: 20px;

label{
display: block;
color: #222;
padding-#{$right}: 5px;
}

however I didn't find the command "font size" there.

I even tried to add  font-size: 14px; but it didn't help, so I guess I was not in the right place...

[suyash1]

@chenle - can you please share your page link where you want to change the font size?

[Kinjaldavra]

hello @chenle 

can you please share your page link where you want to change the font size

[r8r]

@chenle - I assumed you were familiar with modifying the CSS-code, as you mentioned already what didn’t work.

All of us - @Kinjaldavra, @suyash1 band I - already mentioned, telling us the link of your store will make an answer much more precise.

As for your question: you may append the code to your assets/theme.(s)css(.liquid) file. Font-size was just an example - you may modify whatever attribute you want. Also, you can append to the selector to add more css blocks in order to target elements within the description, if you need.

Also, for a more bulletproof override of the current settings - without knowing your live code - I would modify the block above for increased specificity:

.product-single.product-single .description {
  font-size: 2rem;
}

Mario

[chenle]

Hi and thank you all for answering, this is really helping and I learn some new stuff 🙂

Here are some links from my website. As you can see the text is a little too small which makes the whole page a bit dull and unimpressive.  

https://my-secret-czech-store.com/collections/home-garden/products/pot-climbing-plant-support-stand-...

Then I discovered how to use this heading and paragraph thing in the admin so it helped a little but still doesn't look good as you can see here:

https://my-secret-czech-store.com/collections/home-garden/products/space-saving-sheets-hanger-round-...

The headings became ALL in capital letters instead of only the first letter in each word and the  rest of the text is still too small (used choosing "paragraph" in editing). 

Thanks guys..

[chenle]

Any ideas guys?

[r8r · Accepted solution]

@chenle – see, with a link to the page it gets MUUUUUUCH easier …

Here's the CSS-code you'd like to start with – you can modify the size to your liking:

.product-single .detail-bottom .tab-hozizoltal .tab-content .tab-pane .rte.description.description {
  font-size: 1.3rem;
  line-height: 130%;
}

 Before:

After:

Hope this helps now …
Mario

[chenle]

Hi @r8r,

Thanks for your answer.

I just don't understand in which CSS file do I need to put this code and where exactly? (maybe at the botoom?)

Thanks,

Chen 

[Zworthkey]

hii, @chenle 
Paste this code on top of the theme-style.scss file.

.rte.description p, strong, ul, li {
    font-size: 24px !important;
}

Thank You.

[r8r]

@chenle I would advise against the solution that @Zworthkey posted. The Iimportant flag messes up the specificity much more than it should and that might carry additional and unwanted side effects with it. For example, no matter where on the page, ALL ul, li and strong elements would be forced to be rendered at a font size of 24px (which is not what you were asking for).

I suggest you paste the code I gave you at the BOTTOM of the /assets/theme.(s)css(.liquid)-file. I did softly increase the specificity by a single class-count, but putting it at the end of the file increases the chances of not getting overruled even more; without the hammer of an !important – which in general should be your absolute last resort. CSS is interpreted from the bottom and the first rule that matches with a given specificity will be the one to dictate how elements are rendered.

I hope this helps,
Mario

[chenle]

Hi Mario,

I am trying to follow your advise:  BOTTOM of the /assets/theme.(s)css(.liquid)-file.

However, as you can see  I have several theme.scss.liquid in my Assets (that was my problem from the beginning. In which of these to put the code? 

Thanks,

Chen

[r8r]

@chenle – I would use theme-style.scss.liquid. (It would actually work in any of the files, as long as they get loaded.)

Mario

[chenle]

Yeeeeeeee it works !!!

You did it Mario @r8r  Thanks so much 🙂 

and also thank you @Zworthkey 

[r8r]

@chenle – you're welcome 😉

And feel free to mark the right post as the solution. Thank you!

Mario

[greatendurance]

Hi

I am looking for reviews for this theme aashop. How would you rate this theme for an online retail store? Please suggest. Thanks.