Home Forums Ascend Theme Transparent row separator

This topic is: resolved
Resolved
Posted in: Ascend Theme  
  • February 5, 2018 at 5:40 pm #177920

    Hi Kadence Team,

    i try to put a transparent row separator on every page like here: http://joy.design.o-zen.de/

    and since the “normal” pagebuilder separator is not build for this,
    i added my slider and separator on the first pagebuilder row (stretched):

    <div class="wrap_header">
    [kadence_slider_pro id="1"]
    <div class="arrow"></div>
    </div>

    and styled like:

    
    /* -------------ARROW ---------------*/
    .wrap_header {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 100%;
      margin: -10px;
    }
    
    .arrow {
      position: absolute;
      bottom: 1%;
      width: 100%;
      padding-bottom: 1%;
      background-color: rgba(255, 255, 255, 1);
    }
    .arrow:before,
    .arrow:after {
      content: '';
      position: absolute;
      bottom: 95%;
      width: 50%;
      padding-bottom: 3%;
      background-color: inherit;
    }
    .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);
    }
    

    but this is not working fantastic for smaller screen widths and any suggestion is welcome.

    Now i try to use this on every page and it looks even worse: http://joy.design.o-zen.de/referenzen/

    2. Maybe you know a better way of adding this separator on every page? ..or show me what i’m doing wrong?

    Thank you,
    B.Anders

    Sorry, this forum is for Premium customers only. Please Login to continue

    If you are using a free theme you can access support on wordpress.org by searching for the free theme and using the support tab.