Part1

LGC-grids

•  • 
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)

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