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.

If your Flexbox layout using justify: space-between isn’t working in Webflow's tablet viewport, it's likely due to layout conflicts or missing settings that are viewport-specific.

​

1. Check Flex Container Settings in Tablet Viewport

​

• Go to Tablet Viewport by clicking the tablet icon in the top bar of the Webflow Designer.
• Select the Flex container you’re working with.
• In the Style panel, ensure:
• Display is set to Flex (not Block or Grid).
• Flex direction is correct (usually horizontal/row for justify: space-between to work).
• Justify is set to Space Between.
• Align is not conflicting (e.g., use Stretch or Flex Start depending on your layout).

​

2. Inspect Child Elements

​

• Check the size of each child element inside the Flex container:
• If child elements are too wide or have fixed widths, there’s no room left for spacing, so space-between appears to do nothing.
• Ensure they are sized with % or auto widths, or use Shrink/Grow options in the Flex settings.

​

3. Check for Margin or Padding Conflicts

​

• Excessive margins or padding on child elements can disrupt intended spacing.
• Remove or reduce any large left/right margins on Flex children.
• Only rely on Flex justification to control space.

​

4. Look for Wrapping Behavior

​

• In tablet view, elements may stack if the Flex container is set to Wrap.
• If wrapping occurs, space-between will not apply across rows—only across items on the same row.
• Set Flex Wrap to No Wrap, or manage layout using Grid if stacking is needed.

​

5. Reset Tablet Overrides

​

• Webflow allows style overrides by viewport. Settings applied in Desktop aren’t always inherited as expected in Tablet or smaller views.
• Double-check that Tablet inherits settings correctly, or reapply Flex and spacing settings in the Tablet view.

​

6. Check for Hidden Elements or Display Overrides

​

• Some elements might be hidden or displayed differently in different viewports.
• Use the Navigator panel to ensure all children are visible in the current view and not using display: none or display block unexpectedly.

​

Summary

​

To fix justify: space-between not working in Tablet view, confirm that your Flex container is still set to Flex with a horizontal direction, that child elements allow room for spacing, and that no conflicting widths, margins, or wrapping are occurring. Reapply or adjust styles directly in the Tablet viewport when necessary.