Return to previous page

Theme Font Size and LIne Height - by George

This topic has 17 replies, 4 voices, and was last updated 7 years, 9 months ago ago by Olga Barlow

George

Participant

January 26, 2017 at 17:58

I can’t seem to find a Global setting for Font Size and Line Height? In the Admin Panel I see a Font Size/Line Height adjustment in 8Theme Options > Typography > Page > Body Font but this only changes it in a very small section of 1 page.

Thanks.

#153169 Copied

16 Answers

8theme

Support staff

January 27, 2017 at 09:05

Hello,

But it is impossible to make every font size and line height be changed only with one option. In this case you will get ALL texts on the site absolutely equal by size. Sorry, but there is no such option in our theme.

Regards

#153209 Copied

George

Participant

January 27, 2017 at 16:53

Ok. How would I change font size and line height for just the Product Short Description? And content within the Product Tabs? These are the 2 areas I am mainly interested in?

Thanks.

#153279 Copied
Olga Barlow

Support staff

January 28, 2017 at 14:43
Hello,

Use the custom CSS area to make such changes and the following code
```
.product-information p, .product-info-wrapper p, .product-summary-center p {
    line-height: 1.5;
    font-size: 0.8rem;
}
.woocommerce-tabs p {
    line-height: 1.5;
    font-size: 0.8rem;
}
```
Change the values according to your needs.

Regards
#153330 Copied
George

Participant

January 28, 2017 at 19:41

This does great for the Short Description. It makes appropriate changes everywhere except the Product Description tab. There it only changes the line height/font size for the first paragraph. Beyond that, no changes. I had this same problem when trying to make adjustments in the Admin Panel.

Thanks.

#153349 Copied

George

Participant

January 28, 2017 at 20:41

Also, I thought these changes to the Short Description would also change in the Shop Page List View but it doesn’t. How can I make same line height/font changes to Short Description when they displayed on the List View on Shop Page?

thanks.

#153352 Copied
Rose Tyler

Support staff

January 31, 2017 at 14:04
Hello,

Change this code:
```
.woocommerce-tabs p {
    line-height: 1.5;
    font-size: 0.8rem;
}
```
to:
```
.woocommerce-tabs p, .woocommerce-tabs li, .woocommerce-tabs span {
    line-height: 1.5;
    font-size: 0.8rem;
}
```
also use this code:
```
.main-products-loop .products-list .product .product-details .product-excerpt {
    line-height: 1.5;
    font-size: 0.8rem;
}
```
Regards
#153556 Copied
George

Participant

January 31, 2017 at 16:35

The css code worked It changes text and line spacing throughout the single product page and the short desription that shows up on the shop page.

Thanks!

#153579 Copied

Olga Barlow

Support staff

January 31, 2017 at 18:39

You are welcome!

Regards

#153598 Copied

George

Participant

February 3, 2017 at 03:27

OOPS. This works EXCEPT when I use a ul bullet list, then the line spacing impact of the css you gave me disappears? Do you have any css changes that allow for line spacing changes even when I use an ul? This is very important because it allows a much cleaner looking Short Description on both the Single Product Page and Shop Page List View.

See the 2 products with ul and the 1 product without.

https://exteriorcoatings.com/category/waterproof-coating-systems/waterproof-coatings/

Thanks as always!

#153845 Copied
Olga Barlow

Support staff

February 3, 2017 at 15:30
Hello,
```
.type-product .product-excerpt li, .content .product-excerpt li {
    margin-bottom: 0;
    line-height: 1.3;
    font-size: 1.2rem;
}
```
Regards
#153926 Copied
George

Participant

February 3, 2017 at 15:48

Almost there! This css works on Shop Page BUT does not impact Single Product Page. Please send css to adjust when using ul on Single Product Page.

Thanks!

#153932 Copied
Olga Barlow

Support staff

February 3, 2017 at 17:27
Hello,

I see. Then replace that code by the following
```
.type-product .product-excerpt li, .type-product .tab-content li, .type-product .description li {
    margin-bottom: 0;
    line-height: 1.3;
    font-size: 1.2rem;
}
```
Regards
#153947 Copied
George

Participant

February 3, 2017 at 17:36

🙁 It didn’t work. No changes. The Short Descrition on the Shop Page still looks good with your css code to change font/line spacing BUT it did not do the same to the Single Product Page display of the Short Product Description. Still way too much line spacing.

Anymore tricks up your sleeve 🙂

Thanks.

#153953 Copied

Olga Barlow

Support staff

February 3, 2017 at 18:03

Hello,

Sorry, fixed. Check now.

Regards

#153959 Copied

George

Participant

February 3, 2017 at 18:26

Your the best :). It worked! Thanks for the support you and your team offers! For the non-technical your help is absolutely invaluable!!!

#153963 Copied

Olga Barlow

Support staff

February 3, 2017 at 19:16

You are welcome!
We are always ready to help.

Regards

#153971 Copied
Viewing 17 results - 1 through 17 (of 17 total)