Removing some tricky borders

I’m trying to remove all the borders on this page ( including the ones that appear on the hover )

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.