Hey Webflow community. I really need some help. I tried fixing this so many times but feel so stupid and looked at a lot of the solutions online. Like 1) do I have crazy margins, 2) set width to 100% 3) switch to different JS package (highlightjs to prism) 4) add a js text block to create newline. Feels like I’m running out of options and need some help so will be very much appreciated.
Overview
I am creating an interview site where I am using the tab menu to show the hint and solution. Hints and solution are all linked to a specific CMS collection. Since I want to have highlighting in my code solution it uses a rich text field. I am currently using prismjs or highlightjs to get the syntax highlighting done and it seems to work fine in larger desktop screen.
Issue
When I go to mobile or smaller screen sizes the rich text field is overflowing / bleeding and not being dynamic. I am not exactly sure what is causing it. I’ve tried everything as trying to set width to 100%, etc. I did notice that if I hard code the with to let’s say 240px when it’s on a smaller screen it fixes the issue; however, I want to fix this issue so it can be dynamic so I’m not hard coding odd width sizes.
Read-Only site
It seems like the rich text block isn’t visible in the read only mode. It’s under Question 1 Solution. I included screen shots to show the issue.
(Webflow - TechRound)
Screenshot on large screen acts fine.
Screenshot on small screen shows it’s not dynamic and it’s overflowing.
