Element color stretch to left or right side of viewport

Take the grid-row element and set your 2/3 – 1/3 grid cell settings – one of those paddings had to be in relation to screen width
you had to set a calculated relative padding left or right ( depends if your 2/3 grid cell is on the left or right ) – and only set the rules for screen-width less than 1400px ( your 1340px + 2x30px (if this is the alb padding setting ) case if you like to preserve a left / right padding of your alb setting ( in my case 30px )
on responsive case Enfold has its own rules for padding.

@media only screen and (min-width: 1400px) {  /*** it depends on your setting on the alb - i got 30px on all sides : 1340px + 60px ***/
  .flex_cell.avia-builder-el-first {
    padding-left: calc((100vw - 1340px)/2) !important;
  }
  
  .flex_cell.avia-builder-el-first {
    padding-left: calc((100vw - 1340px)/2) !important;
  }  
  
  .flex_cell.avia-builder-el-last {
    padding-right: calc((100vw - 1340px)/2) !important;
  }  

  .flex_cell.avia-builder-el-last {
    padding-right: calc((100vw - 1340px)/2) !important;
  }
}

these rules can be used for all grid-cell sizes because only the first and last are selected!

See example page with 1/2 grid-cell size – but it is the same rules as above ( i have 1510px standard setting for content)
https://webers-testseite.de/grid-row-layout/

for my setting 1510px and 50px setting on Grid-Cell padding overall:
( Sorry this for my page id specific – remove it or replace it to your IDs – or even better give to the grid-row a custom-class )

@media only screen and (min-width: 1510px) {
  .flex_cell.avia-builder-el-first {
    padding-left: calc((100vw - 1510px)/2 + 50px) !important;
  }
  
  .flex_cell.avia-builder-el-first {
    padding-left: calc((100vw - 1510px)/2 + 50px) !important;
  }  
  
  .flex_cell.avia-builder-el-last {
    padding-right: calc((100vw - 1510px)/2 + 50px) !important;
  }  

  .flex_cell.avia-builder-el-last {
    padding-right: calc((100vw - 1510px)/2 + 50px) !important;
  }
}

@media only screen and (max-width: 1509px) {
  .flex_cell.avia-builder-el-first {
    padding-left: 50px !important;
  }
  
  .flex_cell.avia-builder-el-first {
    padding-left: 50px !important;
  }  
  
  .flex_cell.avia-builder-el-last {
    padding-right: 50px !important;
  }  

  .flex_cell.avia-builder-el-last {
    padding-right: 50px !important;
  }
}

see: https://webers-testseite.de/grid-row-layout/

the 1/1 Container shows you the standard of 1510px width on my setting.

• This reply was modified 4 years, 1 month ago by Guenni007.

see now with new css above:
https://webers-testseite.de/grid-again/

and for the breakpoint for responsive case ( in my case it is 990px ):

@media only screen and (max-width: 989px) {
  .gridcontent-special .flex_cell {
    padding-left: 50px !important;
  }
  
  .gridcontent-special .flex_cell {
    padding-right: 50px !important;
  }  
}