▼
Streaming live at 10am (PST)

Am I missing something obvious?! Paragraph text wrapping in flexbox

Community resources Bugs
#1

Hi everyone, I am new to web this week and just staring to build my landing page on it with an emphasis on responsiveness. I think I have got the general gist of it (struggling with the discipline of using classes though).

The major problem I am tearing my hair out with is having is with paragraph text overflow from the div block I am putting it in when reducing screen width. See screenshots:

Screenshot 2020-10-07 at 14.34.31
Screenshot 2020-10-07 at 14.34.311938×782 92.4 KB

Screenshot 2020-10-07 at 14.34.42
Screenshot 2020-10-07 at 14.34.421134×650 71.6 KB

Surely there is a better solution to this rather than adding in line breaks the text? Can’t it wrap to the size of the div block?

Any help would be much appreciate!

Thanks,
Jojo

Read only site: https://preview.webflow.com/preview/jojos-first-project-2554a1?utm_medium=preview_link&utm_source=designer&utm_content=jojos-first-project-2554a1&preview=d6e89e6532a950e8a568c1cde2b4d584&mode=preview

#2

Hi Jojo,

I see you have been busy! I’m not sure what your knowledge is around CSS. One of the fundamental parts of building websites. And because Webflow is a professional tool for designers, it doesn’t mean that the basic rules of the web isn’t needed to be able to create top level sites.

I recommend doing half an hour learning the basics of CSS - https://university.webflow.com/courses/webflow-101-crash-course?video=w-kBRUXsuSQ

I have attached a short video of what you was doing slightly wrong. I have noticed if you copy and paste text directly into a text box, sometimes it doesn’t see the line break, so a simple space added will fix the issue with text overlapping. Also have a look at the ‘position’ property this is sometimes key for things not working correctly. Sometimes setting things to relative will fix the overlapping issue.

Have a watch of the video and just let me know if that fixes the issue or if you need more assistance, and I’ll try my best to help!

[Video Link](https://vimeo.com/user124630203/review/465868799/3ea262f426)

Best of luck!

Steve | 3SIX5 Digital

#3

Thanks a lot Steve. Yes, thinking in terms of CSS is definitely a change in mindset I am getting used to.

I am having a bit of trouble with the video… would you be able to double-check the link to make sure it is not a problem on my side?

Thanks for the help,
Jojo

#4

Hi Jojo,

Yeah I totally understand, it’s a learning curve, but luckily you only need to learn a few basic properties and you will be away! We all start somewhere!

Ah maybe the link wasn’t shareable. Try this link, let me know if you still have an issue viewing the video :slight_smile:

Best regards,

Steve l 3SIX5 Digital

#5

Thanks for your help Steve but I am still having trouble with the text wrapping. What is annoying me is the intermittent nature of it working - sometimes it does what I want but other times not with the exactly the same settings!! I just can’t work it out.

Take the FAQ section I am working on for example.

Some of the boxes wrap and some don’t - I just cant work out what I’m missing. Surely I don’t need enter the line breaks manually and do two versions of the text box, hiding one in the desktop view? I would be amazed if this is the standard web dev process.

Here is a loom showing it working. It is even works when I view the published site on my phone.

I think I must be missing something!!

Cheers,
Jojo

#6

This is even weirder… when I type using the voice record on mac it works, but when I type normally it doesn’t. What!?!

#7

Hi Jojo,

I see your frustration! It could be a bug, or it could be something else that is conflicting it, as I never have this issue… However, I have gone in and found that if you add a space between the word and then delete it, it fixes the issue… I think maybe it could be when copy and pasting text from another document, sometimes Webflow doesn’t see the spaces, and thus it thinks it’s all one word and doesn’t automatically line-break. This seams to fix the problem.

Can I ask how you are putting this text in, are you copy and pasting by any chance?

Hopefully, you will find Webflow easier to use as the time goes on, and you will be flying!

Best wishes,

Steve | 3SIX5 Digital

#8

Try using the designer with NO browser extensions enabled or in the “incognito” or private mode which disables most extensions.

#9

Hi Steve,

Thanks but I am still having trouble with this. Adding a space an deleting it isn’t working.

I create a new FAQ box by copy and pasting the pervious one (which is wrapping) and then type in the new text. It doesn’t wrap in case.

Do you have any other tricks that I would be able to use?

Thanks, Jojo

#10

Hi Jeff,

Thanks for your response. I was using Brave browser but have now tried Chrome (+ incognito) and the same result still occurred.

Do you have any idea what this issue could be?

Thanks,
Jojo

#11

UPDATE:

I have tried editing on my Ipad and this the text is now wrapping :face_with_raised_eyebrow:

#12

Hi Jojo,

That’s annoying I agree…

There could be something else in the document that is stopping this from happening. Like I see you have objects that go outside of the body. See attached image bellow.

Sometimes if you don’t set ‘overflow’ to hidden. It might cause issues, thinking the size of the browser has more room to play with so to speak.

Screenshot 2020-10-09 at 11.59.49
Screenshot 2020-10-09 at 11.59.491848×1126 260 KB

Screenshot 2020-10-09 at 12.03.30
Screenshot 2020-10-09 at 12.03.302332×1410 489 KB

Let me know if this helps the issue. If you send me the updated read-only link and a link to the live Webflow.io URL i’ll take another look, see if there is something restricting it.

Best wishes,

Steve

#13

Hi Steve, that is a good spot but I am afraid it did not resolve the issue.

Here is the updated read only link: https://preview.webflow.com/preview/jojos-first-project-2554a1?utm_medium=preview_link&utm_source=designer&utm_content=jojos-first-project-2554a1&preview=d6e89e6532a950e8a568c1cde2b4d584&mode=preview

And here is the Webflow.io link too: https://jojos-first-project-2554a1.webflow.io/

Thank you again for your help on this.

#14

I’m pleased to say I worked it out!

I had to disable some spell check software called Global Autocorrect (similar to Grammarly).

Hope this helps someone!