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 Flex with "justify: space-between" on the Tablet breakpoint.
- Check that child elements don’t have fixed widths or large paddings that break the layout.
- Disable wrapping unless required, and confirm proper alignment and overflow settings.
- Reset any Tablet-specific overrides and validate the structure using the Navigator panel.
You're trying to use Flexbox justify: space-between in the tablet viewport, but it's not working as expected. This is usually due to overrides, padding, or incorrect element structure.
1. Check That Flex Settings Are Applied on Tablet
- Go to Tablet View in the Webflow designer.
- Select the parent Flex container you want to adjust.
- In the Style panel, make sure:
- Display is set to Flex (horizontal or vertical, depending on layout).
- Justify: Space Between is active.
Sometimes styles applied on Desktop don’t cascade properly to Tablet if they were manually adjusted in that breakpoint.
2. Inspect Element Widths
- Ensure all child elements inside the Flex parent:
- Do not have fixed widths that exceed the container width.
- Are not breaking the layout with large margins or paddings.
- If one child is much wider or has a long block of text, it can prevent “space-between” from activating properly.
3. Look for Wrapping Issues
- In the parent Flex container settings, check if:
- Wrap Children is enabled. In many layouts using space-between, wrapping should be off.
- If wrapping is necessary, elements must be sized to still allow space in each row.
4. Check Overflow and Alignment
- Ensure the parent container has no overflow: hidden/scroll that affects visual alignment.
- Child elements should be aligned properly (align items: center or stretch, depending on your desired layout) to avoid misplacement.
5. Reset Any Tablet-Specific Style Overrides
- Click the blue highlighted style values in Tablet view and choose “Reset” to revert to inherited styles from Desktop.
- Then, reapply Justify: Space Between to confirm it’s working properly.
6. Use Webflow’s Navigator Panel
- Use the Navigator panel to inspect the DOM structure.
- Make sure:
- The correct parent is set to Flex.
- There are no unexpected wrappers or divs affecting layout.
Summary
To fix justify: space-between not working on tablet, verify your Flex settings on that breakpoint, ensure children aren't oversized, and confirm there are no conflicting styles like wrapping or fixed widths. Reset styles if needed and rebuild the structure to match your intent.