Return to previous page

CSS help – product page - by Phil D

This topic has 6 replies, 3 voices, and was last updated 5 years, 9 months ago ago by John Holden

Phil D

Participant

March 1, 2019 at 12:51

Hi!

My CSS isn’t very good .. and I would like to change the font styling of a section of product pages.

We have a fairly wide font with large line-height and wide letter spacing across the site, but it’s not very readable for large blocks of text.

So, I’d like to change the styling for the description, custom content tab and the review section.

Can you help? If you can give me an example of how to do it CSS, I can change the actual styling CSS elements (like font family) myself – my CSS is OK for that. I think.

Related posts shouldn’t be affected, nor anything above the description.

I’ve provided a link.

Thanks!
Phil

Please, contact administrator
for this information.

#210225 Copied Theme version: Xtheme - latest WooCommerce version: Latest

5 Answers
Rose Tyler

Support staff

March 1, 2019 at 14:07
Hello,

Add this code in Theme Options > Custom css:
```
.single-product .tab-description,
.single-product #reviews p,
.single-product .tab-description p,
.single-product .ibox-block .ibox-content h3 {
    letter-spacing: normal;
    line-height: 1.7;
}
```
https://prnt.sc/mrtwvk
You can inspect code on site using inspector tools. To access it, open a web page or web app in Google Chrome. Either:
-Select the Chrome menu Chrome Menu at the top-right of your browser window, then select Tools > Developer Tools.
-Right-click on any page element and select Inspect Element.
The DevTools window will open at the bottom of your Chrome browser.

Regards
#210241 Copied
Phil D

Participant

March 4, 2019 at 20:23
Hello!

Thanks for the reply.

I tried that (put it in global custom css) and it didn’t seem to change anything. I even cleared my cache just in case. Afterwards, I also added !important in case it needed that.

Any thoughts?

I already have these in my css but doubt there’s anything conflicting?
```
.bold-heading { 
  font-family: "Archivo Black", Times, serif;
}

.footer-text {
    font-size: 12px; 
    line-height: 18px; 
    letter-spacing: 1px
}

.content-product .stock, .content-product .available-on-backorder {
    background-color: white;
    color: red;
}
```
Thank you!
Phil
#210412 Copied
John Holden

Support staff

March 5, 2019 at 06:08

Hi,

Please try again, I see custom css worked fine http://prntscr.com/mtcs49

Regards,
Hung PD

#210416 Copied

Phil D

Participant

March 7, 2019 at 22:52

My apologies. I was clearly having CSS caching issues. I’ve now installed a flush cache app and it seems to be working fine.

Thank you!

#210600 Copied

John Holden

Support staff

March 9, 2019 at 06:24

Hi,

Glad to hear your issue has been resolved.

If you have a quick minute we always appreciate a 5-star rating on our theme!

https://themeforest.net/item/xstore-responsive-woocommerce-theme/reviews/15780546

Your feedback is the motivation to improve our work and services.

Regards,
Hung PD

#210619 Copied
Viewing 6 results - 1 through 6 (of 6 total)