Nealoo
5/7/2018 - 12:19 AM

second line arrow for grid

14% and 7% need to try to get

3rem is the double padding for the container on the mobile 12rem is the double padding for the container on desktop

1
content_copyfile_download
<div class="container">4col grid</div>
<div class="container"><div class="arrow"></div></div>


.arrow{
        position: absolute;
        top: -20px;
        left: 0;

        &.col1{
          left: calc((100% - 3rem)/4 - 14%);
        }

        &.col2{
          left: calc(2*(100% - 3rem)/4 - 14%);
        }

        &.col3{
          left: calc(3*(100% - 3rem)/4 - 14%);
        }

        &.col4{
          left: calc(4*(100% - 3rem)/4 - 14%);
        }

        @media (max-width: 800px){
          &.col1{
            left: calc((100% - 3rem)/2 - 14%);
          }

          &.col2{
            left: calc(2*(100% - 3rem)/2 - 14%);
          }
        }

        @media (min-width: 1261px){
          &.col1{
            left: calc((100% - 12rem)/4 - 7%);
          }

          &.col2{
            left: calc(2*(100% - 12rem)/4 - 7%);
          }

          &.col3{
            left: calc(3*(100% - 12rem)/4 - 7%);
          }

          &.col4{
            left: calc(4*(100% - 12rem)/4 - 7%);
          }
        }