Rich text overflow on mobile

Hi webflow-ers,

I can’t work out what’s going on with my site on mobile. The rich text box has text overflowing at both sides.

And elements that are in Div blocks are pushed to one side and only partly on the screen.

I tried bringing in the margins but it won’t let me bring them in any further.

Thanks in advance
EDIT:
The published site where the problem is: justjulia.co
And here is the read-only link: https://preview.webflow.com/preview/just-julia-blog?utm_medium=preview_link&utm_source=designer&utm_content=just-julia-blog&preview=fa3a74d5452e09ac3abb826b3d152020&mode=preview

The problem seems to be in read-only and live

Ah, I’ve just tried Shift, Control, v (on a Mac) and it seems to have removed formatting for the blog posts themselves.

I’m still not sure how to get the “3 collection item” with the photos to stop overflowing.

Mod Edit: Moved topic to Design Help → Feedback

Hi @jmarygraham - When asking for help in the forums, please share your projects read-only link. If the problem is on the published side, also share the published site link.

How to share a read only link:

Thanks. Noted. Just edited above to include the read-only link (https://preview.webflow.com/preview/just-julia-blog?utm_medium=preview_link&utm_source=designer&utm_content=just-julia-blog&preview=fa3a74d5452e09ac3abb826b3d152020&mode=preview)

Hi there,

To fix the text overflowing on your blog post page … If you go to your Post template page: On your collection item; ‘2 collection item’ you will need to remove both the margins: So left margin from 56 to 0, and right margin from -71 to 0.

Similarly on all of your overflowing content, it seems you have some margins set. So for example on your headings you have -70 margin set.

Remember by changing an element on mobile view, you won’t affect that element on any other device. So a change on mobile, won’t alter the desktop view etc.

Hope that helps! Any other questions let me know.

Thanks very much, Josh. I think that works now. Except for one section on mobile and I’m not sure why. It looks fine when I check it in mobile view but when I call up the page on my phone there is one section that jumps off the side of the screen.

It’s on the home page: https://preview.webflow.com/preview/just-julia-blog?utm_medium=preview_link&utm_source=designer&utm_content=just-julia-blog&preview=fa3a74d5452e09ac3abb826b3d152020&mode=preview

And it looks fine on that read only link:

But when I go to justjulia.co and scroll to ‘Sustainability’ this is what it looks like:

If anyone has any suggestions, they’d be most welcome. I’m very much a newbie to this.

Thanks :slight_smile:

Hi Julia,

Learning too. :slight_smile:

I believe you just need to remove that “Section Title Text” text block. I has crazy margins. It’s right under the “posts wrapper” div. Or just remove the margin if you’re needing that title text block there. It’s currently empty.

1 Like

Cheers Danny, that worked. And wow… what was I doing with that margin? haha

1 Like

Glad I could help. :upside_down_face:

1 Like