Part1

LGC-grids

L_Void • Part1

LGC-grids| Mars 6 2023 Edit › sc name="column" class:colCalcWidth

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)