Add divider between sections in grid row

Hi navindesigns,

Thanks for giving us admin access.
I have added a Custom ID Attribute to the gridrow, I just named it mygridrow and added this CSS code in Quick CSS:

.home #mygridrow .flex_cell_inner:after {
    content: '';
    width: 2px;
    height: 50%;
    background-color: white;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.home #mygridrow > .avia-builder-el-last .flex_cell_inner:after {
    display: none;
}

I think the only remaining thing is to center those text which can be done via Special Heading’s options.

Best regards,
Nikko

• This reply was modified 2 years, 1 month ago by Nikko.

Hi navindesigns,

Please add this CSS code:

@media only screen and (max-width:767px) {
  #mygridrow {
    background-color: #274454;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  #mygridrow .flex_cell {
    padding: 10px;
  }

  #mygridrow .flex_cell_inner:after {
    display: none;
  }
}

Hope it helps.

Best regards,
Nikko

Hi navindesigns,

I checked your site and it seems to show the code’s effect properly on my end, probably, clearing the browser cache may help.
Also, with this request “Can I just move the divider horizontally between the items on mobile like this mockup”, please remove the last code I gave on this thread and replace it with:

@media only screen and (max-width:767px) {
  #mygridrow {
    background-color: #274454;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  #mygridrow .flex_cell {
    padding: 30px 0;
  }

  #mygridrow .flex_cell_inner:after {
    display: block !important;
    width: 100px;
    height: 2px;
    top: auto;
    bottom: -20px;
    right: 50%;
    transform: translate(50%, 0);
  }

  #mygridrow > .flex_cell:last-child .flex_cell_inner:after {
    display: none;
  }
}

Best regards,
Nikko