Skewed divs not positioning correctly

Design help General
1

Hello, I’m attempting to reposition some skewed divs in order to make them overlap. There are a couple of issues, however.

  1. There seems to be white space in the containers despite overflow being on and the skewed divs having width and height set to auto.
  2. They don’t seem to be overlapping correctly, and when z-index is applied with relative positioning, this is breaking the responsiveness, particularly on mobile, and the elements overlap too much.

I would love to get some insight from some other professionals, thank you!

Here is my site Read-Only: LINK

2

Hi there,

Here’s how to address overflow and responsive design issues in your Webflow project:

The first step is to check your element structure using X-ray mode in Canvas settings. This will help identify which elements are causing overflow issues. Once identified, implement these fixes:

For whitespace and overflow:

  • Set parent elements to 100% width
  • Ensure child elements are set to 100% width or less
  • Add appropriate padding and margins instead of fixed spacing
  • Consider using relative units (%, vh, vw) rather than fixed pixels

For responsive layout:

  • Test your design across breakpoints using the Designer canvas preview
  • Adjust element positioning and sizing at each breakpoint
  • Use Flexbox or Grid for more reliable responsive layouts
  • Set a Div block with “Overflow: hidden” as a container to prevent content from breaking layout

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

I would still like some more assistance. Thank you!