tuanphan Posted Thursday at 03:14 AM Posted Thursday at 03:14 AM To change Summary Block - Wall layout to 3 columns on mobile, you can follow these #1. First, find Summary Block ID. #2. Use this code to Custom CSS box @media screen and (max-width:767px) { #block-yui_3_17_2_1_1731577451920_10887 { .summary-item-list { columns: 3; column-gap: 0; height: auto!important; display: block!important; padding: 0 5px; } .summary-item { position: relative!important; transform: none!important; width: 100%!important; display: block; padding: 5px!important; box-sizing: border-box; height: auto !important; top: unset !important; } .summary-item img { height: 100% !important; width: 100%!important; position: static !important; } } } #3. If you want to apply this to all Summary Blocks (Wall layout), use this new CSS code @media screen and (max-width:767px) { div.summary-v2-block[data-block-json*="autocolumns"] { .summary-item-list { columns: 3; column-gap: 0; height: auto!important; display: block!important; padding: 0 5px; } .summary-item { position: relative!important; transform: none!important; width: 100%!important; display: block; padding: 5px!important; box-sizing: border-box; height: auto !important; top: unset !important; } .summary-item img { height: 100% !important; width: 100%!important; position: static !important; } } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment