Logic card height using excerptsThe excerpts CSS and HTML code are from SC



SC for the crop/hover img:
sc name="card1" N="A3" W="30%" H="30%" mgnR="1.5%" img1="HYTTE.jpg" img2="LAKE.jpg" h1_Yshift="0%" h1_transit="1s" rad="0" b_="2px" b_st="dashed" b_col="dodgerblue" shadow="0px 0px 0px rgba(0,0,0,0)"

contain_02 · title_02 · body_02


Most up to date card shortcode.
Edit SC
The card1 shortcode detailed in column 1 makes it very easy to insert a hover/crop card image. The card height finally controlled by % thru padding-top in the card container.

.contain {width:x%; padding-top:y%}
The px_lblue image plays an essential role in transmitting the width from the LGC colum to a full width inside it and avoid the container being reduced to the active text width.
wrapper_01 (modified vs SC)| LOCAL HTML VERSION (CSS automatically imported via SC presence below)
lgc_column grid=”50″
div class=”post_wrap2 px_lblue div class=”container_01Local”
div class=”crop_01 + img”
Edit SC

Cardstart: article class=wrapper_01 | DOCUMENTATION VERSION
.wrapper_01 {height:100%; border:1px solid rgba(100,120,230,0.1); margin:0 0 2px 0!important; border-radius:3px; overflow:hidden; background:none;}
@media (min-width:1025px) {.wrapper_01 {padding:0.2vw 0.3vw 0.2vw;}}
div, p1 optional
lgc_column grid="50"
lgc_column grid="50"
.px_lblue {width:98%; border-top:2px dashed dodgerblue!important; margin-right:0.5vw!important; margin-top:1px;}
post_wrap2 px_l
.crop_01 img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:51; opacity:0.85;}
.crop_01 {position:relative; overflow:hidden; background-color:none; float:left; margin:0 16px 4px 0;}
@media (min-width:1025px) {.crop_01 {min-width:30% ; padding-top:30% ;}}


THE SHORTCODE VERSION sc name=”excerpts”
Cardstart: article class=wrapper_01 | NON PARAMETRIC VERSION
Cardstart: article class=wrapper_01 | PARAMETRIC VERSION