How can I create a fixed-size grid/table in Webflow that remains 940px across all device sizes and enables side-scrolling for overflow on small devices?

To create a fixed-width grid or table (940px) in Webflow that allows horizontal scrolling on smaller screens, follow these steps:

1. Set Container Overflow Behavior

• Add a div block to your page. This will be your scroll wrapper.
• Set the width of this wrapper to 100% so it fits the viewport.
• In the Style panel, set Overflow: Scroll (horizontal) or Overflow: Auto on this div.

2. Insert the Fixed-Size Grid/Table

• Add another div block inside the scroll wrapper. This will be your grid/table container.
• Set this inner div’s Width to 940px (fixed).
• Create your grid or table layout within this div using either:
• CSS Grid: Add a Grid element and define specific columns and rows.
• Flexbox: Use nested flex containers to mimic a table.
• Manual Table Styling: Use a collection of div blocks styled like table rows and cells.

3. Style for Readability and Structure

• Add borders, padding, and text alignment to mimic table rows/cells if you're not using native tables.
• Apply min-height or line-height to table rows for consistency.
• Optionally, use white-space: nowrap on cell content to prevent text from wrapping.

4. Enable Mobile Scrolling

• On smaller screens, the scroll wrapper (which still spans 100% width) will show a horizontal scroll bar if content overflows the 940px container.
• Scroll will be available automatically due to the overflow setting.

5. Optional – Hide Scrollbar Styling

• Use custom CSS in Page Settings > Custom Code if you want to hide or modify scrollbars.
• Example inline tip: Use Webflow’s Custom Code area to apply styles like ::-webkit-scrollbar { display: none; } if desired.

Summary

Wrap your 940px-wide table/grid in a 100%-width scrollable div and set the wrapper’s overflow to scroll or auto. This lets your fixed layout scroll horizontally on smaller devices without disrupting the visible layout.