Rich Text Field with Highlight Code Not being dynamic

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.

Possible to bump the thread? Any webflow pro moderator can give some free time. :smiley: