Return to previous page

How to adjust Shop page product padding - by franksong

This topic has 15 replies, 3 voices, and was last updated 1 years, 9 months ago ago by Tony Rodriguez

franksong

Participant

March 6, 2023 at 15:02

Hi, how can i adjust padding make it not looking wired in this case?

Please, contact administrator
for this information.

#349053 Copied Theme version: 9.0.4 WooCommerce version: 6.1.1

14 Answers

Rose Tyler

Support staff

March 6, 2023 at 15:20

Hello, Franksong,

Thank you for reaching out to us.

Unfortunately, there are no settings available to adjust the space, however, custom CSS code can be used to make the desired changes.

If you could provide us with the URL of the page from your screenshot via the Private Content area, we would be more than happy to assist you further.

Kind Regards,
8theme team

#349056 Copied

franksong

Participant

March 6, 2023 at 16:18

That would be awesome.

I do actually have other question need your support.
1.Heading and text font-size adjustment
2.The vertical alignment, is it possible to expand and align the bottom area?

Please contact administrator
for this information.

#349076 Copied
Rose Tyler

Support staff

March 7, 2023 at 08:23
Dear Franksong,

Try to add the next code in Theme Options > Theme custom CSS > Mobile:
```
.products-grid .product {
    padding: 10px;
}
```
1/ Theme Options > Theme custom CSS > Mobile:
```
.category-description .banner .banner-title span {
    font-size: 20px;
}
```
```
.category-description .banner-content .content-inner {
    font-size: 20px !important;
}
```
2/
```
.main-products-loop .product, .products-loop .product, .carousel-area .product-slide .product {
    display: flex;
    justify-content: center;
}
.products-loop .ajax-content, .products-loop {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}
.content-product {
    flex-direction: column;
    justify-content: top;
    display: flex;
    flex: 1;
}
```
Kind Regards,
8theme team
#349142 Copied
franksong

Participant

March 7, 2023 at 09:01

Sweet, Pasted the code and realised the space between vertial direction maybe too wide.

How could I shrink the space between? maybe 10-15px

Please contact administrator
for this information.

#349151 Copied
Rose Tyler

Support staff

March 7, 2023 at 11:45
Dear Franksong,

Try to add the next code in Theme Options > Theme custom CSS > Mobile:
```
.content-product {
    margin-bottom: 0px;
}
```
Kind Regards,
8theme team
#349178 Copied
franksong

Participant

March 7, 2023 at 12:15

That is perfectly fixed.

I would also ask 2 more question.
1. I use variation swatches function, and I want these item not showing under mobile shop page.

Which element that I shall point to to hide these area by css display none?

2. Under single product page how shall I hide “Clear” element and remove spacing?

Please contact administrator
for this information.

#349181 Copied
Rose Tyler

Support staff

March 7, 2023 at 13:20
Dear Franksong,

1/ Theme Options > Theme custom CSS > Mobile:
```
.products-loop .product .st-swatch-preview {
    display: none;
}
```
2/
```
.single-product a.reset_variations {
    display: none;
}
```
Kind Regards,
8theme team
#349189 Copied
franksong

Participant

March 7, 2023 at 15:25

Thank you, It seems working properly for first one.

But for second code I found the clear option still exist even with display: none.

Anything that could possibly affect?

#349222 Copied

Rose Tyler

Support staff

March 7, 2023 at 15:46

Dear Franksong,

“But for second code I found the clear option still exist even with display: none.” – Have you cleared cache of the browser on your mobile device?

Would you be able to provide a screenshot from your mobile device?

Thank you for your cooperation.

Kind Regards,
8theme team

Please contact administrator
for this information.

#349224 Copied

franksong

Participant

March 7, 2023 at 17:53

Sure, here is the screen shows on mobile, please havve a look.

I did cleared the cache.
Through code I think there is nothing wrong as well. So that makes me feel wired.

Please contact administrator
for this information.

#349250 Copied

franksong

Participant

March 7, 2023 at 18:01

Not sure if this information helps.

When I check the code it shows there are another display inline override the display none.

Please contact administrator
for this information.

#349252 Copied
Tony Rodriguez

Support staff

March 8, 2023 at 04:59
Hello franksong,

In order to resolve your issue, please copy and paste the following CSS code into XStore >> Theme Options >> Theme Custom CSS >> Global CSS. After clearing the browser cache of the mobile device, the issue should be resolved.
```
.single-product a.reset_variations {
    display: none !important;
}
```
The result of this code should look like the image provided: https://postimg.cc/w1gGMFqV

We wish you the best of luck and thank you for choosing 8Theme’s products.

Best Regards,
8Theme’s Team
#349270 Copied
franksong

Participant

March 8, 2023 at 05:10

Thank you! Its all good now. Thank you for everything.

#349272 Copied

Tony Rodriguez

Support staff

March 8, 2023 at 09:53

Hello franksong,

We are pleased to hear that everything is now in order. Should you require any further assistance in the future, please do not hesitate to contact us.

We wish you a pleasant day.

Topic Closed.

Sincerely,
8Theme’s Team

#349301 Copied
Tagged: adjustment, product padding, shop page, theme, woocommerce, wordpress
Viewing 15 results - 1 through 15 (of 15 total)