contain_02 · title_02 · body_02
Quote - Comment 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%}
Title_00n_o
Description_00n_o
Title_00n
Description_00n
Title_00n_o
Description_00n_o
Title_00n
Description_00n
Card title
This is the body content of the card. The cropped image is sized responsively W/H (PC, Tab, Mob) relative to a % width of the card container (,itself a % of the vw via the LGC). All the other card components – caption, title and body – are also built responsively using vw. The main design solution is in the s_crop_01 container class which contains the image and caption, set using width via minimum-width% and height via padding-top%. This allows for precise layout control across platforms and enhanced readability on smaller screens.
This is the body content of the card. The cropped image is sized responsively W/H (PC, Tab, Mob) relative to a % width of the card container (,itself a % of the vw via the LGC). All the other card components – caption, title and body – are also built responsively using vw. The main design solution is in the s_crop_01 container class which contains the image and caption, set using width via minimum-width% and height via padding-top%. This allows for precise layout control across platforms and enhanced readability on smaller screens.
See detailed card structure using s_crop_01 img (min-width:n% & padding-top:n%)
1 – post_wrap00 full width container
2 – LGC responsive column inlc. post_wrap2 + margin
3 – s_crop_01 container: W/H % of LGC
4 – s_crop_01 img 100% of the above
News
The IMG container uses s_crop_01 img
(min-width:n% & padding-top:n%)
160-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.