Hi all!
So some of the copy looks wonky on mobile and I wish I could clean it up by doing some forced breaks, but if I do it in mobile the same happened in desktop. Is there any way to do this so that the line break only stays in that device?
Thanks in advance!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Let me ask you this? Do you need actual line breaks or just a way to space the lines out? You could also just use Rich Text block instead as another way to break out the lines.
Let me know if that helps?
@QA_Brandon thanks so much for your reply! So, not quite. Here is what I am trying to do in more detail
This is what the paragraph looks like on desktop:
When I go to mobile it looks like this:
So I want to clean up the text a bit and drop some words down to the next line, like “the” and “a”:
But when I go back to desktop, it’s broken up, bc it’s picking up the same as what I did on mobile:
I tried the rich text and it did the same 
Instead of using line-breaks, you could try wrapping parts of the text in a span tag.
For example, from your last screen-grab you could wrap from “Sustainable Project… impacts of”.
On the mobile view you can set the visibility to “block” and on larger screens it should be set to “inline”.
Do shout if this doesn’t make sense!
@nomoredesign that is a great Idea. Also just using the Block Inline option for the text on Mobile should work just as well.
If you could share us a link to the page, we could help out better. Your link is broken.
@visualcravedesign, you could also just change the padding on the mobile BP would should move those items down to the next line.
But attach a shareable link and let me take a look.
@nomoredesign thanks so much!! Although I am still a bit confused. How do I find this “span tag” or “block”
This article should help: Inline text formatting | Webflow University
If you scroll down to “Wrapping a text in span to style it further” and there’s a good description in there.
@nomoredesign I still don’t get it I looked at the article and it doesn’t say much abut line breaking with span and exactly how to do it and how to control it on different devices
hi @visualcravedesign, if you like to share us your read-only link we could have a look and show you how it might me done with @nomoredesign’s idea 
Hello @visualcravedesign,
I tried to span a rule for a specific part of the text which has its display in inline block on desktop and block on mobile. Would that do the trick for you ? However, I’d be really carefull in styling text that way as Webflow mobile device’s breakpoint isn’t fixed to 320 px but extend up to 479 px wide… which might mess the styling we just did.
From my perspective, micro-typography is just really tough to adjust in html… I wish we had some Adobe Indesign typography features within Webflow I guess the safest solution is to adjust the content of your text itself so that it looks fine on all breakpoints.
Nice site by the way ! 
@anthonysalamin Thanks for the explanation! I’m going to digest it and try it out.
And thank you!! I looked up your site and wow! Coming from you that is a nice compliment — love your site and your work!!
@anthonysalamin BTW, did you use After Effects for your animations? I am trying to learn that right now 
@anthonysalamin Ok, so it seems that there is really no way to make it perfect, since devices are different. Sigh.
I agree, I wish there was! I love type and it bothers me when I have widows or weird breaks, so yeah that’s too bad Thanks for trying though!
You’re welcome Well I am no typographer but do come from a print design background and also appreciate good typography. In webdesign, I’m afraid there won’t be any perfect solution for text until we get a justifying tool like the one from Adobe Indesign to pimp up the word spacing, kerning, leading, tracking etc… That is definitely something Webflow could break through and become a pioneer. Current “justify left” option is just terrible. I think I might add this idea to the wishlist actually.
did you use After Effects for your animations?
I don’t use AE for those logo animation if that’s what you meant - those are just SVG animation. Have a look at the “vivus” script that allows mindblowing line animations or simply go to its online svg animation editor… drag your svg, play with the settings, save your animated svg file like a pro 
If you’re into code a little, you could then edit yourself so many things if you open your svg file… it’s just html markup. Also, for mor complex animations that are not line-based, you could try svgator which is also an online svg editor, free. SVG animation is the future.
Regarding your text issue on mobile:
Rather than trying to micro-tweak pieces of text for specific devices’width, I would instead write “targeted content”. What I mean by that is you write a block text that looks good on desktop + tablet and add a class to it so that it is hidden on mobile devices.
Then I would write another block text, with a few changes so that its length looks good on mobile devices variations and add a class to it so that it is hidden on desktop + tablet but visible on smartphones. Also, aligning text to the left instead of centering it might help avoid uncomon line breaks, making the text a tiny bit smaller so that enough words can fit an entire line could help improve the continuity of your block text.
I think that’s the safest solution you could opt for so that your layout doesn’t break.
@anthonysalamin Wow! That “virus” thing is so amazing just on first look! Is it as easy as just dragging and dropping it?? 
I’m going to look into this further thanks for sharing that!!!
I agree with you on the type situation with Webflow. I was so glad I found this program bc I love everything I can do with it and the fact that I was able to learn it (I know I am no where near knowing it all, but was able to build my site) and that just means it’s really easy to understand and follow! Code is not my friend it’s super hard for me to follow, so I’m not too familiar with “classes” and such unfortunately So yeah if Webflow could add these type tweaks, they would blow every competitor away!
Is there a tutorial on classes? That is foreign to me
Yeah I tried the left align, but I really wanted the “intro” section to be centered and I didn’t like how the left aligned looked with the “top wiggle” and the headline and the “bottom arrow” being centered, but if I left aligned everything then it looked funny to me. So I left as is, but I do like you r idea on the “classes” and tweaking the content to fit each device better.
Thanks!!
@visualcravedesign, yes vivus is that easy ! Drag it, tweak it, save it 
Classes aren’t so hard to use, I think you use them already throughout your site.
I made a small video recording of how you could set up your desktop content and smartphone content to display on desktop respectively smartphones depending to the class they have. I think tweaking the content to fit each device is your best bet if typography / copy is important to you yes, just give it a try !
@anthonysalamin OMG, I already tried it!! So cool! I can’t believe how easy that was!! Thanks for that video, very helpful! I will look at it closer and try it!
