IMG controls1 |   Basic CSS solutions
1   Linked popup IMG in auto-columns | Note: managing the “block cut and/or bleed into next column”   Height push unresolved below if 3rd and 4th col. empty.

section class=”colnb4 pw5″ style=”display:flow-root; overflow:hidden; break-inside:avoid; height:max-content;” Add hr class=”_5″ to ensure container bottom push.
VITA Mobile


COVID1 hardcoded in editor


Reference w3: css3_multiple_columns
  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

‹a href='/...jpg' class='popup' data-height='720' data-width='1040' data-scrollbars='0'›‹div class="ØfL1 p1" style="width:65%; break-inside:avoid; margin:4px;"›
‹img src="/wp-content/uploads/COVID1.jpg" alt="" width="100%" class="alignleft" /›‹div class="Øsub4">COVID1 hardcoded in editor‹/div›‹/div›‹/a› 


2   Inline images



‹div class="ØfL7 sq-c pØ" style="width:90px; margin-right:4px;">‹img class="sq-img" src=" /wp-content/uploads/LEVE.jpg " class="aligncenter" / >‹/div >
‹div class="ØfL7 pØ" style="margin-right:4px;">‹img class="h90" src=" /wp-content/uploads/LAKE.jpg " class="aligncenter" / >‹/div >




3   Background image & center_block, image overlay

‹div style="width=100%; padding:35px; background-image:url(/wp-content/uploads/xxx.jpg);">
‹img class="center_block pw5" src="/wp-content/uploads/SAFARI_LOGO.png" alt="" width="40%" style="padding:20px;"/>






‹div style="margin:0px; padding:50px; background-image:url(/wp-content/uploads/xxx.jpg);">‹img class="center_block post_wrap12" src="/wp-content/uploads/yyy.jpg" alt="" width="25%" style="padding:16px;"/>w/div >