Remove image border around product

Hi kathrogers,

have you tried putting this style rule in your child theme’s CSS file:

ul.products li.product img {
    border: 0;
}

Hello!

Thank you for looking into it.

I’ve tried that and it’s not worked. Also tried none instead of 0.

Any other help would be much appreciated ??

I tried the code above on the homeware page using firebug and it eliminated the border.
Have you tried using !important? It needs to overwrite what’s in grey.css and if the above is not working, perhaps adding !important at the end could force the application of the new rule (although it seems a bit odd that it’s not doing so without this little hack).

That’s really strange that it worked for you using firebug! I’ve already tried using !important and it still isn’t working.

Very strange!

These are 2 screenshots of the image in question.

With border: https://antonietta-designs.net63.net/imagewithborder.jpg

Without border: https://antonietta-designs.net63.net/imagenoborder.jpg

Hi kathrogers,

Has the problem been solved?

Hello Antonietta,

The problem has been solved on the homeware page now – thank you so much!

It’s still showing the grey border on the product page though, any suggestions?

https://oneofakindpembs.com/shop/homeware/driftwood-photo-frame-5-x-7/

Thank you for your help – I’m still getting used to WordPress

It’s still showing because the selector is different. Here’s the code as it is now:

.images img {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E6E6E6;
    padding: 0.618em;
    width: 100%;
}

In style.css in your child theme override the above by adding:

.images img {
    border: 0;
}

I hope this helps (it worked with firebug).

It’s still showing because the selector is different. Here’s the code as it is now:

.images img {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E6E6E6;
    padding: 0.618em;
    width: 100%;
}

In style.css in your child theme override the above by adding:

.images img {
    border: 0;
}

I hope this helps (it worked with firebug).

Sorry that the message is showing more than once: it’s just that after posting the first and second time nothing was showing. Only later I could see all attempts at posting displayed on the page.

Worked perfectly! Thank you for your help ??

Great!

I am also trying to remove the gray borders from my product page and I am not having any luck. I am using a child theme of Virtue Premium and WooCommerce. I have tried adding

.images img {
    border: 0;
}

to my Child Theme CSS without any luck. I am somewhat a novice so I am not sure how to find out where the problem lies.

https://www.angelswimwear.net/brazilian-bikinis/

Any help would be much appreciated.

Hi everbluellc,

Try adding this bit of CSS to your child theme’s stylesheet:

.products div.product {
  border:none;
}

I hope it helps ??
– Maria Antonietta

Hi Maria,

I tried pasting the above into my CSS but still nothing. I’m not sure what the issue is. Any other suggestions?

Thank you,

Mike