Hi Naomi,
It looks like you're working with a private site. If you can point me to the theme you're using, I may be able to help with some specific tips.
Basically, you need to target the parent container(s) and make sure the widths are fixed values vs. percentages. These days, mobile-friendly designs generally use percentages unless there is a specific need to fix the width. I'm not sure what your use case is but I have done that for table data that I set up so it had to be scrolled horizontally. It's a bit fiddly but can still be easier to read than over-crowding things on a small screen.
Here's a quick example. Resize the width of your browser window to see the difference.
[[div style="width: 80%; border: 2px solid black; padding: 30px;"]]
This DIV is set to 80% and should size relative to the message window.
[[/div]]
_
[[div style="width: 800px; border: 2px solid red; padding: 30px;"]]
This DIV is set to 800px and should not change as the size of the message window changes. It will actually overflow the right margin if the message window gets narrower than 800px.
[[/div]]
This DIV is set to 80% and should size relative to the message window.
This DIV is set to 800px and should not change as the size of the message window changes. It will actually overflow the right margin if the message window gets narrower than 800px.