Header line

[BG Anders]

BG Anders

May 13, 2018 at 10:19 am

Hi Ben,

if you remember, you helped me replacing the page title with the image and arrow beneath. Works perfectly everywhere except on the Portfolio pages, where a white line shows above the header. Can’t figure out why, because i copied from other pages that work. Maybe the Portfolios have something different?

The div’s are added in a HTML widget, but i also tried in text/visual editor:
<div class="wrap_header">[kadence_slider_pro id="7"]
<div class="arrow"></div>
</div>

The CSS:
.wrap_header {
position: relative;
overflow: hidden;
width: 100%;
height: 600px;
margin: 0px;
}
.wrap_header img {
width: 100%;
}

.arrow {
position: absolute;
bottom: 0;
width: 100%;
padding-bottom: 0;
background-color: transparent;
}
.arrow:before, .arrow:after {
content: '';
position: absolute;
bottom: 0;
width: 50%;
padding-bottom: 50px;
background-color: white;
}

.arrow:before {
right: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(60deg);
-webkit-transform: skewX(60deg);
transform: skewX(60deg);
}
.arrow:after {
left: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-60deg);
-webkit-transform: skewX(-60deg);
transform: skewX(-60deg);
}

@media (max-width: 780px){
.arrow:before, .arrow:after {
padding-bottom: 35px;
}
}