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?
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:
- Instead of columns, use a div block
- Apply the same style
Flex rowto it
- Add 2 divs for columns inside of this new flex row
- Again, apply the same classes
column 3to each div
- Move the content: the
about wrapperto column and
left paddingto column 3
- Delete the old flex row
- Now remove the positioning applied to
columnand apply a negative margin instead
- Now select
flex rowand Align it to the top i.e set
Align:startand select the
column 3and set the flex item to
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:
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!