Product grid style (Hoover – Round – Background – space)

This topic has 10 replies, 2 voices, and was last updated 3 years, 9 months ago by Aizaz Imtiaz Awan.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
February 10, 2021 at 3:19 am #265170

geoguyo
Participant

Hi, support,

I am looking to give my product grid a specific look, but I can’t add the final touch to it.

I would like it to be with a white background, rounded, with shadow on hoover and space between product grids.

Please see examples in the attachment.

Attachments:
You must be logged in to view attached files.

February 10, 2021 at 11:34 am #265315
Aizaz Imtiaz Awan
Keymaster
Hello,

First of all thanks for choosing our Theme, we are glad to be you in the WoodMart WordPress family :).

I saw the screenshot you attached.

Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.
```
.product-grid-item {
    margin-left: 25px;
    max-width: 22%;
}

.product-grid-item:hover {
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
}
```
Regards.
Xtemos Studios.
February 10, 2021 at 1:39 pm #265384

geoguyo
Participant

Hi,

Thanks for your reply. I’ve added it but unfortunately, nothing happened.

Could you take a look in the back office?

regards

February 11, 2021 at 6:47 am #265511

Aizaz Imtiaz Awan
Keymaster

Hello,

Please provide the admin panel login details of the website to check it myself and help you out accordingly.

Regards.
Xtemos Studios.

February 17, 2021 at 10:28 am #267265

geoguyo
Participant

Hi,

I finally found the right grid, thanks for your help.

I have two last questions:

– Concerning my related product grid, they obviously are impacted by the code. Can I have a CSS code to make them look normal not shred? (see photo below)

– Additionally, I would like to know how to remove this gap between the bottom of my page and the footer? (another screenshot below)

Best regards

Attachments:
You must be logged in to view attached files.

February 17, 2021 at 12:42 pm #267316
Aizaz Imtiaz Awan
Keymaster
Hello,

You are Most Welcome.

I saw the screenshots you attached.

1) For the related product issue try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.
```
.single-product-page .woodmart-carousel-container .product-grid-item {
    margin-left: 10px;
    max-width: 100%;
}
```
And there is no space displayed as you mentioned it seems that you have managed to remove it.

Regards.
Xtemos Studios.
February 17, 2021 at 1:06 pm #267325

geoguyo
Participant

Hi,

thanks for your prompt answer. For the Related products, the issue is 90% fixed except in the cart, the section you might be… still shows reduce product grid.

As for the other issue, it seems like it happens not on the homepage but on the new pages that I’m created and building with the WC Bakery.

regards.

Attachments:
You must be logged in to view attached files.

February 17, 2021 at 1:14 pm #267334

geoguyo
Participant

Hi again.

I have an issue on mobile, seems the piece of CSS isn’t working. (screenshots below)

Regard,
Geoffrey

Attachments:
You must be logged in to view attached files.

February 17, 2021 at 1:17 pm #267337

Aizaz Imtiaz Awan
Keymaster

Hello,

Please provide the admin panel login details of the website to check it myself and help you out accordingly.

Regards.
Xtemos Studios

February 17, 2021 at 1:22 pm #267341

geoguyo
Participant

Hey,

Please check info below on private content.

February 18, 2021 at 6:44 am #267512
Aizaz Imtiaz Awan
Keymaster
Hello,

Your issue has been resolved. Now that CSS is working for both desktop and mobile.

Please clear cache and check back.

And for the space issue try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.
```
.footer-sidebar {
    padding-top: 0px;
}
```
Regards.
Xtemos Studios.
Author

Posts