Streaming live at 10am (PST)

Break/wrap link in mobile view


#1

Hi,

I'm wanting to resolve links not wrapping in mobile view, it broke other components that I didn't want to break. https://forum.webflow.com/t/responsive-link-word-wrapping-issue/31068/2

How do I isolate the specific class to break?

http://a-living-theory.webflow.io/blog/post/then-came-the-morning-mindfulness-via-mediation
https://preview.webflow.com/preview/a-living-theory?preview=a94ce00d956e347412f774b183f9f4e7

Best,

Nathan


Here is my public share link: LINK
(how to access public share link)


#2

** same question goes for the links in the dropdown button in mobile view.

http://a-living-theory.webflow.io/freebies/secrets-to-amazing-intimacy-the-best-relationship-and-marriage-action-list

Best,

Nathan


#3

Hey Nathan. This is the code you need in your site's head section;


.parent-element-class p, a {
overflow-wrap: break-word;
word-wrap: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}


#4

Hi @AlexManyeki,

This is what I did, but it's not working...thoughts?

Best,

Nathan


#5

Replace the .parent-element-class with the actual class name of your element.

That was meant to be a placeholder.


#6

You're the man! @AlexManyeki

Best,

Nathan


#7

for instance, instead of pasting that code over and over several times with each new element, could one do something like .parent-element-class, .different element ?

Best,

Nathan


#8

Yes. Thats what you do.



.element1 , .element2 , #element3(incase of ID) {
overflow-wrap: break-word;
word-wrap: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}


#9

@AlexManyeki

If I wanted to have it also break on forward slashes (/), would I do the same code but replace hyphens with forward-slash?

Best,

Nathan


#10

word-wrap : break-word; should work for all elements that have a set width including slashes. See fiddle here;

http://jsfiddle.net/p4SxG


#11

hmmm...I have that code. Then that would mean that I don't have the correct element stated in my code.

I'm not sure how to go about identifying the listed item in an unordered list in a rich text field that is dynamically calling the data.

I tried using the Google web developer tools to inspect and find it but no such luck...maybe because I'm using minify html setting in Webflow?

Any here is the page which speak of https://www.alivingtheory.com/blog/then-came-the-morning

Best,

Nathan


#12

Everything seems fine.


#14

Hi @AlexManyeki,

Maybe try collapsing the width...it does it when it shrinks down to mobile when and there are no hyphens to break at.

Best,

Nathan


#15

Ok. Let me have a look and see where the problem is.


#16

Hi @nathanphilsteele, one thing you might try is putting this in the head of the dynamic template page setting:

<style>
a {word-wrap: break-word; word-break: break-all;}
</style>

This will target all links on the dynamic template page, regardless where they are on the page.

I hope this helps.


#17

Hi @cyberdave,

I tried the "break-all" code before and it broke my nav links in an undesired way....is there a way to say "break-all except..."?

Best,

Nathan


#18

Hi @nathanphilsteele, not really except that you might try the "normal" option as in:

 <style>
a {word-wrap: break-word; word-break: break-all;}
</style>

Or just simply create your links as images or inline links so that you can use a shorter word for the displayed links.

I hope this helps.


#21

@cyberdave, after digging around for a few hours, unless there is a way to give a max width the specific mobile portrait media query, you are 100% correct. Fortunately this my personal site. Next site I build will be sure to take into account "break-all"...it unfortunately breaks the rest of my site When I use it, and it would be a hugely massive pain to work around it.

**if you think there is some way to make it work with media queries and max width, that would be so amazing.

Best,

Nathan


#22

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.