Skip to content

Make grid block VTL renderer responsive on small screens #35791

@fmontes

Description

@fmontes

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

  • Grid block columns collapse to full-width stacking below 768px
  • Style block is injected only once per page, even with multiple grid blocks
  • Desktop layout remains unchanged at >= 768px
  • No visual regressions in existing grid block usages
  • Verified on mobile viewport (Chrome DevTools or real device)

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.

Metadata

Metadata

No fields configured for Feature.

Projects

Status

QA

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions