Docs

[churchpath]

Hi,
stack: Ethos
plugin: woocommerce
detail: main product thumbnail page
Latest theme x

I’ve attached a screenshot showing how I would like the dk grey background to appear upon hover.
I have marked the area in a yellow dotted frame.

Can you tell me what CSS I should use to achieve this effect please?
Rather than it appear from the bottom.

thanks,
T.

[Zeshan]

Hi T,

Thanks for writing in!

You can achieve that by adding following CSS code under Custom > CSS in the Customizer:

.woocommerce li.product:hover .entry-wrap {
  padding: 10px 20px;
  width: 70%;
  left: 15%;
  height: 70%;
  overflow: hidden;
  top: 15%;
}

Thank you!

[churchpath]

Thank you we’re nearly there 🙂

I’ve attached another screenshot that shows with the longer title names it breaks them.

Screenshot attached:
In the product it should be titled: MAJORELLE BLUE, now it just shows ‘MAJOREL’.

And the VIEW DETAILS has no space at the bottom whereas most of the others do.

Can you please advise?

[Paul R]

Hi,

To further assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[churchpath]

This reply has been marked as private.

[Paul R]

Hi,

The text doesn’t fit the width of your product container on smaller screens.

You can reduce the number of columns as the screen gets smaller.

Add this under Custom > CSS in the Customizer.

@media (max-width: 1325px) {
   .woocommerce li.product {
         width: 30.66666%;
   }

   .woocommerce li.product:nth-child(3n+3)  {
         margin-right:0; 
   }
}

@media (max-width: 820px) {
   .woocommerce li.product {
         width: 48%;
   }

   .woocommerce li.product:nth-child(3n+3)  {
         margin-right:4%;
   }

   .woocommerce li.product:nth-child(2n+2)  {
         margin-right:0; 
   }
}

Hope that helps.

[churchpath]

Thanks I’ll give this a go and report back.

T.

[Zeshan]

You’re welcome! 🙂

[Author]

Posts