Add background color to product page description area

Resolved Lavpristelte.dk
(@lavpristeltedk)

2 years, 2 months ago

Could I add som CSS that enables me to add background color to the description area on product pages to differentiate this area from the rest of the product page that is all white ?

The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 16 total)

1 2 →

Kharis Sulistiyono
(@kharisblank)

2 years, 1 month ago
Hi @lavpristeltedk,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.
```
.single-product .product .woocommerce-tabs {
    background-color: #f2f2f2;
}

.single-product .product .woocommerce-tabs > div {
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 10px;
}    
```
Thread Starter Lavpristelte.dk
(@lavpristeltedk)

2 years ago
Hi Kharis,
Thanks for your feedback.
Is it possible to go full width with the background color ?

https://www.have-bruser.dk/vare/udendoers-bruser-med-haandbruser-i-messingfinish-koldt-og-varmt-vand/
- This reply was modified 2 years ago by Lavpristelte.dk.
Kharis Sulistiyono
(@kharisblank)

2 years ago
Hi @lavpristeltedk,

Try adding this CSS code:
```
.single-product .product .woocommerce-tabs {
        margin-left: -15px;
        margin-right: -15px;
}
```
Thread Starter Lavpristelte.dk
(@lavpristeltedk)

2 years ago
Hi Kharis,
It did not solve the issue. This just widened the area but also movede the content. I only look for the color to go full width. Maybe this is not possible.
- This reply was modified 2 years ago by Lavpristelte.dk.
Kharis Sulistiyono
(@kharisblank)

2 years ago
Hi @lavp

Thank you for getting back along with extra details.

If that the case, try the below revised code:
```
.single-product .product .woocommerce-tabs {
   margin-left: -15px;
   margin-right: -15px;
}

.single-product .product .woocommerce-tabs > * {
   margin-left: 15px;
   margin-right: 15px;
}
```
Thread Starter Lavpristelte.dk
(@lavpristeltedk)

2 years ago
Thanks again.
We are almost there.

On PC it seems to be working fine but on my Iphone there is some problems with the right side of the content. Only the right side.

Can this code be made so it only works on desktop an not tablet and mobile phones ?

The site is set to a max content width = 1440px – maybe this code could just work for screens that exceeds this size.

https://www.have-bruser.dk/vare/udendoers-bruser-med-haandbruser-i-messingfinish-koldt-og-varmt-vand/
- This reply was modified 2 years ago by Lavpristelte.dk.
Thread Starter Lavpristelte.dk
(@lavpristeltedk)

2 years ago
It seems that I made it work myself 🙂
The entire code for this is:
```
.single-product .product .woocommerce-tabs {
    background-color: #f2f2f2;       
}

.single-product .product .woocommerce-tabs > div {
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 10px;
}    
@media screen and (min-width: 1440px) {
.single-product .product .woocommerce-tabs {
   margin-left: -650px;
   margin-right: -650px;
}
	}
@media screen and (min-width: 1440px) {
.single-product .product .woocommerce-tabs > * {
   margin-left: 650px;
   margin-right: 650px;
}
}
@media screen and (max-width: 1440px) {
.single-product .product .woocommerce-tabs {
   margin-left: -15px;
   margin-right: -15px;
}
	}
@media screen and (max-width: 1440px) {
.single-product .product .woocommerce-tabs > * {
   margin-left: 15px;
   margin-right: 15px;
}
}
```
- This reply was modified 2 years ago by Lavpristelte.dk.
Kharis Sulistiyono
(@kharisblank)

2 years ago

Great!

Glad to hear you got your own code worked. And thank you for sharing it here. That’s much appreciated!

Thread Starter Lavpristelte.dk
(@lavpristeltedk)

2 years ago

Another question.
Above related products there is a lot of white space. Do you have a ccode that reduce this

Earlier on I had a code that reduced the white space above category name but I don’t know whet the field code is for the related products.

https://www.have-bruser.dk/vare/udendoers-bruser-med-haandbruser-i-messingfinish-koldt-og-varmt-vand/
Kharis Sulistiyono
(@kharisblank)

2 years ago
Hi @lavpristeltedk,

Try this CSS code:
```
.product .woocommerce-tabs {
    margin-bottom: 0;        
}

.related.products {
    padding-top: 20px;
}
```
Thread Starter Lavpristelte.dk
(@lavpristeltedk)

2 years ago

Perfect.

What about cross sell products ?

https://www.have-bruser.dk/vare/excel-havebruser-udendoers-bruser-kobber/

Thread Starter Lavpristelte.dk
(@lavpristeltedk)

2 years ago

I mean Up sell products

Kharis Sulistiyono
(@kharisblank)

2 years ago

Hi @lavpristeltedk,

I am not sure which space should be eliminated from up-sell section. It would be helpful if you could have provided a screenshot.

Thread Starter Lavpristelte.dk
(@lavpristeltedk)

2 years ago

ok – see here: https://we.tl/t-f4y8szVoQL
Kharis Sulistiyono
(@kharisblank)

2 years ago
Thanks for sharing the screenshot, @lavpristeltedk!

Try adding this CSS code:
```
.upsells.products {
  padding-top: 40px;
}
```

Viewing 15 replies - 1 through 15 (of 16 total)

1 2 →

The topic ‘Add background color to product page description area’ is closed to new replies.