Stop these elements from overlapping

Hi everyone! Just looking for a way to fix this issue on my site. This section of text is overlapping when the browser is not wide enough…how to fix?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @DylanUrquhart

To fix the overlapping issue, I suggest that you revise the structure of that whole section. You’re using a columns element and you’ve applied flex and some positioning. Now, the trick is to use less styles so it’s less complicated and issues like this don’t arise. So, here’s how I’d structure it:

  1. Instead of columns, use a div block
  2. Apply the same style Flex row to it
  3. Add 2 divs for columns inside of this new flex row
  4. Again, apply the same classes column and column 3 to each div
  5. Move the content: the about wrapper to column and left padding to column 3
  6. Delete the old flex row
  7. Now remove the positioning applied to column and apply a negative margin instead
  8. Now select flex row and Align it to the top i.e set Align:start and select the wrap children option
  9. Select column 3 and set the flex item to expand

That should fix the overlapping and create a more responsive and less cluttered section.

And here’s a video I recorded showing you how to restructure that section:

CloudApp

Hope this is helpful. If you have any other questions, please don’t hesitate to reach out to us, and we’ll be happy to help!

1 Like