So I have been putting in the work of trying to get to know webflow.
Followed the 21 days course. Currently have the issue that the text in a RTE (Rich Text Element) is overlapping only in mobile portrait. I have to say the most issue I have are in mobile portrait. For all the other lay-outs it is not a problem.
I switched from Columns to a Grid. I added a Div Block. I changed height of the text, and I still get nowhere.
I changed position from static to relative to absolute, but it did not work (obviously).
I changed height of the text from 20 px to 1.6 --, even tried EM, but it dit not work.
What does change something but not enough is I changed it to flexbox and the direction. It does work a little but, but not completely.
Please can somebody explain to me what I am doing wrong? I have been search for hours on the web and tried every possible solution but it still did not work.
@Howitec2024 I have found that few codes need to be corrected also, the structure is not proper but I am sharing the solution for the code here:
1st - I would like to remove the position: fixed from the mobile navbar .navbar-4 as Applying fixed here restricts users from viewing other content on mobile due to limited space. Screenshot
2nd - Remove height and margin-top from .sectionproductheader.productScreenshot
3rd - change the margin of the image .image-164.netoplossingenScreenshot
4th and last change the p tag margin-bottom to 0 Screenshot
Hello @addweb , thank you for the corrections of the codes.
I could not find dhe 4th P tag margin-bottom, unless it is part of the image, the margin was set on 0.
It still does not fix the overlapping text in for example ‘Rich Text Block 27’ with the title ‘Ornata Addu’.
I dragged the RTF with the overlapping content all the way to the bottom, making it the last element, this way knowing it’s not influenced by it’s containers/parents. It appears there’s something in the Rich Element itself, since changing the flex gap to for instance 160px solves the overlapping content: link
Maybe, changing the Rich Text elements to normal text blocks can reduce these errors, since the styling will be much more straightforward.
Overall I would advise you to continue your learning curve by looking into the Client-First system by Finsweet. They provide a good method on how to structure a site, creating a system that’s easy to maintain site and device wide.
Is the parent container of the RTE set to a fixed height or width that might be restricting the text flow? Have you tried setting it to auto for height and ensuring padding/margin settings are appropriate?
So, thank you so much for all of your input.
I asked an expert to have a look at it. I suspected it to be something small and well it sort of was.
My predecessor worked in Webflow before me had apparently put the spacing in All Paragraphs at -140 at the bottom.
This caused the text to overlap and not listen to the line height.
So anyone who has this same problem. Check your All Paragraphs if line height is not working :).
