Description
The grid block VTL renderer (gridBlock.vtl) applies column widths as inline styles, which prevents the grid from adapting to small screens. On mobile viewports, columns remain at their desktop widths and overflow/squish content.
A scoped <style> block (injected once per page via a Velocity flag) with a 768px media query was added to collapse grid columns to full-width stacking on small screens. !important overrides are required because column spans are applied as inline styles.
Related commit: d909f1b
Acceptance Criteria
Additional Context
File modified: dotCMS/src/main/webapp/WEB-INF/velocity/static/storyblock/gridBlock.vtl
Approach: scoped <style> block via Velocity flag (one-time injection) + @media (max-width: 768px) rule with !important to override inline column widths.
Description
The grid block VTL renderer (
gridBlock.vtl) applies column widths as inline styles, which prevents the grid from adapting to small screens. On mobile viewports, columns remain at their desktop widths and overflow/squish content.A scoped
<style>block (injected once per page via a Velocity flag) with a768pxmedia query was added to collapse grid columns to full-width stacking on small screens.!importantoverrides are required because column spans are applied as inline styles.Related commit: d909f1b
Acceptance Criteria
Additional Context
File modified:
dotCMS/src/main/webapp/WEB-INF/velocity/static/storyblock/gridBlock.vtlApproach: scoped
<style>block via Velocity flag (one-time injection) +@media (max-width: 768px)rule with!importantto override inline column widths.