I’m trying to remove all the borders on this page ( including the ones that appear on the hover )
http://www.muslimahwebdesign.co.uk/wac/collections/page/2/
but as you can see there are some left that I just cannot find the css to remove.
How do I find them?
Firebug for me, or your dev tool of choice for you, is a great help!
Most seem to be box-shadows.
style.css (line 2572)
#mpcth_page_wrap .woocommerce .products .product .mpcth-post-content,
.woocommerce-page #mpcth_page_wrap .products .product .mpcth-post-content {
background: #ffffff none repeat scroll 0 0;
box-shadow: 0 -2px 6px -2px rgba(0, 0, 0, 0.1); /* COMMENT ME OUT */
font-size: 1.083em;
height: 5.25em;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
z-index: 1;
}
found most of them but it’s the ones on hover I can’t get rid of:
Can you?
Let’s start here. Notice the rightmost pseudo-class is “:hover”.
Your job is to comment out or override the box-shadow.
style.css?ver=4.3 (line 2564)
#mpcth_page_wrap .woocommerce .products .product .mpcth-product-wrap:hover,
.woocommerce-page #mpcth_page_wrap .products .product .mpcth-product-wrap:hover {
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
ah, does it show up in sinspect element like that or do you just know to ad hover to it?
It shows up like that in Firebug when I select the option to show :hover styles.
No, I would not know to add :hover to that particular selector. It’s not a sure-thing.
that’s what I’m always missing is that hover styles option. Where is it?
Select a selector on the left.
Drop down the “Style” menu and select :hover (see the check mark).
If the item you have selected on the left has :hover styles, they will appear above the current styles on the right… as you can sorta see in the screen shot.
The :hover option does not persist.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
