How can I fix the issue with long vertical table margins in Webflow when viewing on mobile devices?
TL;DR
- Inspect and reduce excessive padding/margins on table elements and wrappers in mobile view.
- Adjust display and overflow settings to prevent vertical stretching and enable horizontal scrolling.
- Modify table layout with flex or grid for better mobile responsiveness.
- Limit and wrap long cell content to avoid uneven row heights.
- Use Custom Code for advanced styling if Webflow’s native tools are insufficient.
Long vertical margins in tables on mobile devices in Webflow usually stem from either row height issues, padding/margin settings, or overflow/display problems that aren't optimized for small screens.
1. Inspect Table Spacing on Mobile
- Go to the Webflow Designer and switch to the mobile view (using the device icons at the top).
- Select your table element (or the div wrapping it) and check for excessive padding or margins applied to:
- Table rows (
<tr>) - Table cells (
<td>or<th>) - Containers or div blocks around the table
2. Check Display and Overflow Settings
- Ensure the container or table is not forcing its size vertically:
- Set Display to
blockorflexif using div wrappers. - Set Overflow to
autoorscrollfor horizontal scroll if the table is wider than the screen (especially important). - On mobile, avoid
min-heightorvhunits that cause large vertical heights.
3. Use Responsive Table Style Adjustments
- On mobile breakpoints, try adjusting the table layout:
- Set Display to
blockfor the table (or use Webflow’s Custom Code embed if table is native HTML). - Consider turning the table into a stacked layout using Grid or Flexbox instead. Tables are notoriously hard to make mobile-friendly.
4. Reduce Cell Content and Wrapping
- Long content inside table cells causes uneven row height and long vertical margins.
- Apply text wrapping or limit font size on mobile (e.g., set
white-space: normaland reducefont-size). - Set max-width or overflow-wrap: break-word as needed.
5. Use Custom Code if Needed
- If you're embedding actual HTML tables and CSS isn’t applying properly, use Custom Code in the Page Settings or an Embed element:
- You can include media queries to force better table behavior on mobile breakpoints.
Summary
To fix long vertical table margins on mobile in Webflow, reduce excess padding/margins, check layout/display settings, adjust content wrapping, and consider converting the table to a flex or grid layout for better responsiveness. Use Custom Code only if Webflow’s styling limitations prevent a proper fix.