Paul Paul - 3 years ago 182
HTML Question

Shadow appearing on page

I am trying to structure a media query and for some reason the page is creating a shadow when my mouse is hovering anywhere on the page. It is only doing it on a desktop with the window scaled down to a viewport of 640 or below.

I am referring to this shadow line under the blue container:

enter image description here

This can be seen live at :

http://optimumwebdesigns.com/contact

I believe the cause is a container I have,

contact_arrow_box
. The code for it is this:

.contact_arrow_box {
position: relative;
background: #88b7d5;
width: 50%;
height: 100%;
float: right;
}
.contact_arrow_box:after, .contact_arrow_box:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.contact_arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-right-color: #88b7d5;
border-width: 30px;
margin-top: -30px;
}
.contact_arrow_box:before {
border-width: 36px;
margin-top: -36px;
}


My media query alteration for this container:

.contact_arrow_box {
width: 100%;
height: auto;
}
.contact_arrow_box:after, .contact_arrow_box:before {
top: 100%;
left: 50%;
}
.contact_arrow_box:after {
border-width: 30px;
margin-left: -30px;
}
.contact_arrow_box:before {
border-width: 36px;
margin-left: -36px;
margin-top: 0;
}


Does anyone see the cause for this?

Answer Source

This is the culprit

.no-touch:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}

Disable or overwrite it to remove the box-shadow effect

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download