JS not working after doing custom css on Wordpress Site

Question

I am currently in the process of developing an online shop via wordpress. Everything was working fine, now I wanted to give my page a custom border( inverted round corners) and found the css code for it as seen here:

css:

body {
  background-color: #fff;
}

.wrapper {
  overflow:hidden;
  width:200px;
  height:200px;


}

div.inverted-corner {
  box-sizing:border-box;
  position: relative;
  background-color: #3e2a4f;
  height: 200px;
  width: 200px;
  border: solid grey 7px;
}

.top, .bottom {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;

}

.top:before, .top:after, .bottom:before, .bottom:after{
  content:" ";
  position:absolute;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border: solid grey 7px;
  border-radius: 20px; 
}

.top:before {
  top:-35px;
  left:-35px;


}

.top:after {
 top: -35px;
 right: -35px;
  box-shadow: inset 1px 1px 1px grey;
}

.bottom:before {
  bottom:-35px;
  left:-35px;
}

.bottom:after {
 bottom: -35px;
 right: -35px; 
 box-shadow: inset 1px 1px 1px grey;
}

html:

<div class="wrapper">
<div class="inverted-corner">
<div class="top">&nbsp; </div>
  <h1>Hello</h1>
  <div class="bottom"> </div>
</div>
  </div>

I renamed the classes to get no conflict with the existing css classes of the theme. It is working fine as seen here:my site. The problem is now, that I cannot interact with the site anymore, no links, no hover effects. It seems like the custom css is overlaying the actual site. Do you have any suggestions what I maybe did wrong?

P.S. I edited the header.php so that inverted corner div and the top div are right underneath the page-wrapper div( site content) and in the footer.php I edited the top div and the inverted-corner div closing right above the page-wrapper div closing.

The DIV .bottom-corner is overlapping all your site. Setting pointer-events: none; would fix it but older browsers doesn't support this property. — A. Wolff
– A. Wolff, Commented May 7, 2015 at 12:10
@Rob You meant all browsers except IE<11 and opera mini: caniuse.com/#feat=pointer-events — A. Wolff
– A. Wolff, Commented May 7, 2015 at 12:17

Jeremy Thille · Accepted Answer · 2015-05-07 12:09:55Z

6

Add :

pointer-events: none;

to the .bottom-corner CSS, so the mouse passes through.

answered May 7, 2015 at 12:09

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

James Donnelly Over a year ago

Please note that this will not work on IE10 or lower. caniuse.com/#search=pointer-events

Jeremy Thille Over a year ago

Oh, I forgot this damn IE. Screw people who still use IE<10.

user3079933 Over a year ago

Thank you so much. This single line fixed it :D

Jeremy Thille Over a year ago

Nice :) Please validate the answer if you're happy with it. (The "answer" you validated, for me, is the diagnostic, but it brings no solution at all. It just tells you what you did wrong, but brings no fix. My answer is the fix.)

unconditional · Accepted Answer · 2015-05-07 12:10:05Z

3

In your custom.css you have this:

.top-corner, .bottom-corner {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;

}

This basically overlays the whole page and thus disables any interaction.

answered May 7, 2015 at 12:10

unconditional

7,7641 gold badge20 silver badges33 bronze badges

4 Comments

Jeremy Thille Over a year ago

That's the diagnostic, not the solution :)

unconditional Over a year ago

This is a direct answer to the OP question "Do you have any suggestions what I maybe did wrong?"

user3079933 Over a year ago

Ahh this is actually making sense now :D

unconditional Over a year ago

FYI, the cause of such type of issues is easily spotted with the Inspector type tool in your browser's Developer tools. E.g. developer.chrome.com/devtools/docs/dom-and-styles, developer.mozilla.org/en/docs/Tools/Page_Inspector

Nilesh Mahajan · Accepted Answer · 2015-05-07 12:20:38Z

0

One other option I would like to suggest to change following css rule

CSS

.top-corner, .bottom-corner {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
}

Replace above code with the below one

.top - corner, .bottom - corner {
    position: absolute;
    width: 100 % ; 
}

this solution will work on all modern browsers and IE8 and above ( I'm not sure about lower version of IE, but it may work on them as well )

edited May 7, 2015 at 12:20

answered May 7, 2015 at 12:12

Nilesh Mahajan

3,51623 silver badges35 bronze badges

Collectives™ on Stack Overflow

JS not working after doing custom css on Wordpress Site

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related