Can someone help me troubleshoot the issue with my Flexbox justify: space between not working in Webflow? Please take a look in the tablet viewport.
TL;DR
- Ensure the parent container is set to horizontal Flex with "Justify: Space Between" on the tablet breakpoint.
- Check child elements for overly large widths or margins, and verify that flex direction hasn’t changed to column.
Your Flexbox justify: space between setting may not appear to work properly in the tablet viewport of Webflow due to additional styles, element widths, or changes in layout direction. Here's how to troubleshoot it.
1. Check Flex Container Settings
- Make sure the display of the parent container is set to Flex.
- Set Justify: Space Between and Direction: Horizontal Row.
- Confirm you're viewing tablet settings and not overwriting with mobile styles.
2. Inspect Flex Child Elements
- In the tablet breakpoint, select each child element inside the flex container.
- Check that their widths are not too large (e.g., set to 100% or fixed) which can prevent any space from appearing between them.
- Set widths to Auto or use a max-width constraint to allow space.
3. Disable or Adjust Margins
- Look for any margins on the flex children. Margins can override or visually compromise the "space between" effect.
- Remove or minimize left/right margins and rely on Flexbox spacing instead.
4. Responsive Overrides in Tablet View
- A common issue: you may have style overrides in the tablet view that differ from desktop.
- Check if the flex direction or width settings change on the tablet breakpoint (inherited styles may be different).
- If tablet has Flex Direction: Column, then "space between" will distribute vertically instead of horizontally.
5. Inspect Using Navigator or Dev Tools
- Use the Webflow Navigator panel or browser Inspect element tool to check for:
- Unexpected overflow issues
- Float, clear, or absolute positioning that could interfere with layout
- Unintended style inheritance
6. Test with Placeholder Elements
- Temporarily add simple Block Divs with set widths (like 100px) into the Flex container.
- This helps isolate whether the issue lies in the layout or content/design of your actual children.
Summary
Your justify: space between likely isn't working on tablet due to child element widths, margins, or a flex direction change. Check the tablet breakpoint styles independently and ensure the parent is still set to horizontal flex with appropriate child sizing.