use the grid-row element for that.
you can change the sizes on right bottom Corner of that element to 3/5 2/5

for your image uset the grid-cell background option .
you can see here on the demo the 1/2 1/2 case: https://kriesi.at/themes/enfold-freelancer/

if you do not want to influence all fullwidth buttons on all pages – you should give to those fullwidth-buttons a custom-class.
in my case i use for that : fullwidth-specialbutton

because of the inline setting of most of those values we had to use !important on most of the rules

#top .fullwidth-specialbutton .avia-button.avia-button-fullwidth {
  padding: 40px !important;
  margin: 40px 30px !important;
  width: calc(100% - 60px) !important; /*** this has to correspond to your margin (left/right) settings ***/
  background-color: yellow;
  color: #333 !important;
  border-radius: 20px !important;
  border: 2px solid #333 !important;
  box-shadow: 2px 2px 15px #333;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease
}

#top .fullwidth-specialbutton .avia-button.avia-button-fullwidth:hover {
  background-color: darkblue;
  color: #FFF !important;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease
}

/*** this background is on enfold for highlite status - we do that with hover-style ***/
#top .fullwidth-specialbutton .avia-button.avia-button-fullwidth .avia_button_background {
  display: none
}

#top .fullwidth-specialbutton .avia-button.avia-button-fullwidth .avia_iconbox_title, 
#top .fullwidth-specialbutton .avia-button.avia-button-fullwidth .avia_button_icon {
  font-size: 50px !important;
}

or try this in your quick css:

/****** sticky header with transparent bg at beginning *************/
/****** adjust the 989px to when responsive case burger is visible ***** my setting is 990px ********/
@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #header .container {
    width: 90%;
    max-width: 90%;
  }
   
  #header {
    position: fixed !important;
    height: 115px !important;   /*** 80px if you got no top header ****/
    max-height: 115px !important;   /*** 80px if you got no top header ****/
  }
  
  .responsive #top #wrap_all .av_header_transparency {
    background-color: transparent;
  }

/****** if you like to have on mobile white bg first then this and remove transparency option 
  .responsive #top .header_bg {
    opacity: 1;
    filter: alpha(opacity=100);
    background-color: #fff !important;
  }
*************/
   
  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img {
    height: 80px !important;
    max-height: 80px !important;
  }
  
  .responsive #top .av-main-nav .menu-item-avia-special a {
    height: 80px !important;
    line-height: 80px !important;
  }
}
/****** End *************/

you can see it here in action: https://webers-testseite.de/pureinstall/

but please try the second solution. It seems the better one for responsive case:

#fullwidth-content .container .content {
  vertical-align: top !important;
}

#fullwidth-content .post-entry {
    position: relative;
    top: 5%;
}

#fullwidth-content .container {
  max-width: 100%;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

#fullwidth-content .flex_column.first {
  width: 55%;
  padding: 20px 20px 10px 10vw;
  background: rgba(255,255,255,0.7);
  position: relative;
  float: left;
}

#fullwidth-content .flex_column.avia-builder-el-last {
  position: relative;
  float: left;
  width: 30%;
}

@media only screen and (max-width: 767px) {
  #fullwidth-content .flex_column.avia-builder-el-last {
    float: none;
    width: calc(100% - 100px) !important;
    margin: 0 50px !important;
  }
  #fullwidth-content .flex_column.first {
    float: none;
    width: calc(100% - 50px) !important;
    margin-right: 50px
  }
}

or do you mean this “sticky” behavior: https://webers-testseite.de/sticky-elements/

this is css for the possibility to have a neightbour container to that “flag” on the left
second color-section got a unique ID : fullwidth-content2

#fullwidth-content2 .container .content {
  vertical-align: top !important;
}

#fullwidth-content2 .post-entry {
    position: relative;
    top: 20%;
}

#fullwidth-content2 .container {
  max-width: 100%;
  width: 100% !important;
  padding: 0
}

#fullwidth-content2 .flex_column.first {
  width: 55%;
  padding: 20px 20px 10px 10vw;
  background: rgba(255,255,255,0.7);
  min-height: 150px;
  position: relative;
  float: left;
}

#fullwidth-content2 .flex_column.avia-builder-el-last {
  position: relative;
  float: left;
  width: 30%;
}

@media only screen and (max-width: 767px) {
  #fullwidth-content2 .flex_column.avia-builder-el-last {
    float: none;
    width: calc(100% - 100px) !important;
    margin: 0 50px !important;
  }
  #fullwidth-content2 .flex_column.first {
    float: none;
    width: calc(100% - 50px) !important;
    margin-right: 50px
  }
}

if you open the icon-box Element you do not have 3 General Tabs on top ( see screenshot above )
Content, Styling and Advanced !

on default the option is not activated ( “Hide template builder developer options” ) – see dashboard – Enfold – Layout Builder:
https://kriesi.at/documentation/enfold/intro-to-layout-builder/#developer-options

Just for info: some ALB Elements got extra-args for that filter – so you can influence f.e. on timeline.php the date and the title headings
Date is on default : h2 – and the title is h4
if you want to influence those ALB Elements with extra args you had to do following:

function my_avf_customize_heading_settings( array $args, $context, array $extra_args = array() ){
  //so here comes the extra_arg date with that filter 
  if( $context == 'avia_sc_timeline' && is_array( $extra_args ) && in_array( 'date', $extra_args ) ) {
    $args['heading'] = 'h3';            
    $args['extra_class'] = 'my-timeline-date-class';   
  }
  //so here comes the extra_arg title with that filter
  if( $context == 'avia_sc_timeline' && is_array( $extra_args ) && in_array( 'title', $extra_args ) ) {
    $args['heading'] = 'h1';            
    $args['extra_class'] = 'my-timeline-title-class';   
  } 
  return $args;
}
add_filter( 'avf_customize_heading_settings', 'my_avf_customize_heading_settings', 10, 3 );

the max-width is set on :

.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px;
}

so set on quick css f.e.

.mfp-iframe-holder .mfp-content {
    max-width: 80vw;
}

• This reply was modified 5 years, 2 months ago by Guenni007.

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;
  }  
}

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

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/

by the way – the line in textblock.php is now on the newest enfold on line 222.
the wpautop had to be erased – so from

$params['innerHtml'] = "<div class='avia_textblock avia_textblock_style' data-update_with='content'>".stripslashes(wpautop(trim(html_entity_decode( $params['content']) )))."</div>";

to

$params['innerHtml'] = "<div class='avia_textblock avia_textblock_style' data-update_with='content'>".stripslashes(trim(html_entity_decode( $params['content']) ))."</div>";

if you are working on a child-theme you can have a whole edited textblock.php on your child-theme/shortcodes/ folder by having this little snippet in your child-theme functions.php:

function avia_include_shortcode_template($paths){
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');
  return $paths;
}
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);

• This reply was modified 5 years, 2 months ago by Guenni007.