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 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)
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:
Flex row
to itcolumn
and column 3
to each divabout wrapper
to column and left padding
to column 3
column
and apply a negative margin insteadflex row
and Align it to the top i.e set Align:start
and select the wrap children
optioncolumn 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:
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!