LGC-grids| Mars 6 2023 Edit › sc name="column" class:colCalcWidth
Edit SC
The clear Property
leftDIV This DIV floats left This DIV floats left This DIV floats left
rightDIV This DIV floats right (clear:right)
myContent (clear:none) 
#leftDIV  {float:left; width:80px;  background-color:rgba(163,193,253,1); margin:8px; padding:10px;}
#rightDIV {float:right; clear:right;  width:140px; background-color:rgba(253,153,153,1); margin:8px; padding:10px;}
#myContent1 {margin:12px; clear:none;} #myContent2 {margin:12px; clear:right;} 

!! Margin does not work consistently inside floats !!
myContent (clear:right) 
#leftDIV  {float:left; width:80px;  background-color:rgba(163,193,253,1); margin:8px; padding:10px;}
#rightDIV {float:right; clear:right;  width:140px; background-color:rgba(253,153,153,1); margin:8px; padding:10px;}
#myContent1 {margin:12px; clear:none;} #myContent2 {clear:right;} #myContent2 {clear:left;}
myContent (clear:left) 
#leftDIV  {float:left; width:80px;  background-color:rgba(163,193,253,1); margin:8px; padding:10px;}
#rightDIV {float:right; clear:right;  width:140px; background-color:rgba(253,153,153,1); margin:8px; padding:10px;}
#myContent1 {margin:12px; clear:none;} #myContent2 {margin:12px; clear:right;} #myContent3 {margin:12px; clear:left;}
!! Margin works ok here !!
LGC-grids CSS styling architecture| Shortcode options: class, style, equal_heights
There are native tags and added ones: • lgc-grid-parent - (Native | Responsive | !! added to CSS): These are initially invisible • inside-grid-column - (Native | Responsive | !! added to CSS): These are initially invisible • Lgc0, Lgc1(Responsive), Lgc2 - (ELM added to CSS) (Designed to add borders and better manage the margins on mobile) •lgc0
Beaver Themer
Category and Page Template Th_LAY2_Menu_G for page layout and ACF block placements.
No "Disable wpautop" plugin control (Issues among others in CV page layout calls) • lgc1
SiteOrigin Custom Styling 1
/*-- Page background --*/
.separate-layout { background-color: #f2f2f2; }
/*- - LGC COLUMNS - -*/ .lgc-grid-parent { see CSS } .inside-grid-column { see CSS } •lgc1
In page: styling the container and LGC columns
1/ Style @top level for SU block container
• div class="post_wrap7" •

2/ Style for each LGC column:
• div class="post_wrap0" • •lgc1
Shortcodes SU
When applicable Settings to determine various SU objects
•lgc1
•post_wrap9
_ _ _
Beaver Themer
Category and Page Template Th_LAY2_Menu_G for page layout and ACF block placements.
No "Disable wpautop" plugin control (Issues among others in CV page layout calls)
SiteOrigin Custom Styling 1
/*-- Page background --*/
.separate-layout { background-color: #f2f2f2; }
/*- - LGC COLUMNS - -*/ .lgc-grid-parent { see CSS } .inside-grid-column { see CSS } lgc1
In page: styling the container and LGC columns
1/ Style @top level for SU block container
• div class="post_wrap7" •

2/ Style for each LGC column:
• div class="post_wrap0" • post_wrap6
Shortcodes SU
When applicable Settings to determine various SU objects
post_wrap_Grp
_ _ _
2 2
1