Word wrap splits the words in half on mobile version

Tagged: mobile word wrap glitch

This topic has 8 replies, 3 voices, and was last updated 7 years, 7 months ago by Wes.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
September 15, 2016 at 3:16 pm #19441
Blair
Customer
On the iPhone mobile version of the site, the words are being cut in half when wrapping, instead of just wrapping the whole word to the next line. Is there any way to fix this glitch?! It makes it hard to read and it doesn’t look very professional. When I test it on my macbook safari, and I drag the window to the dimensions of the iPhone it does not do this. The whole words wrap instead of cutting them in half. So it appears to be isolated to the mobile site.
September 16, 2016 at 12:51 pm #19451
Eric
Customer
Do you have a link to your site so we can see the issue?

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
September 17, 2016 at 12:01 pm #19470
Wes
Moderator
@Blair if you look in your Style.css file in the Widgets section of the CSS (around line 990 in the default CSS) you can remove the code labeled – word-wrap: break-word;
```
/* # Widgets
---------------------------------------------------------------------------------------------------- */

.widget {
	word-wrap: break-word;
}
```
That should fix it. If not, send me a link or I can login and remove it for you if you want. Just let me know
September 17, 2016 at 8:53 pm #19478
Blair
Customer
The site is http://www.spoonfulofparadise.com

Thanks so much Wes! I tried deleting the word-wrap: break-word; line in the widget brackets like you suggested. It seems to turn off text wrapping altogether on a couple of the widgets. So I tried to just delete the word break-word; instead, but the same problem. Plus it is still breaking some of the words in half, which leads me to believe there may be another place with that line of code. Sure enough I searched and found it in two other places as well. I have pasted them below.

.comment-content {
clear: both;
word-wrap: break-word;
}

and

.site-inner {
background-color: #fff;
clear: both;
margin-top: 170px;
position: relative;
z-index: 9;
-word-wrap: break-word;
}
September 17, 2016 at 10:31 pm #19479
Wes
Moderator
I just realized that the same text added in the demo works fine and doesn’t cutoff like it does on your site. I’m wondering if it has to do with the extra spacing and line breaks that was added in your HTML/Text?

I copy/pasted the text from your site, added it into the Demo, and everything aligns in the center perfectly. This is without needing to remove any word wraps. Can you try adding the Text in like this below and let me know if that fixes it? –

<p>You’ll get our weekly updates as we feed you practical tips, life changing knowledge, and hedonistically healthy recipes.</p>

If it does then it must have something to do with the extra spacing and line breaks.
September 19, 2016 at 4:43 pm #19490
Blair
Customer
Thanks Wes. Where exactly do I paste this into the HTML? As of now the plain text is in the front page 9 widget section using the Genesis – eNews Extended widget. It seems the widget converts it all into HTML so is there somewhere else I should paste it or should I paste it into the widget?
September 21, 2016 at 1:39 pm #19513
Wes
Moderator
Oh I thought you added in some custom HTML. If you’re adding plain text inside the field then it should show up as plain text.

I tested on a local installation and it shows up as plain text.
September 21, 2016 at 7:43 pm #19516
Blair
Customer
Well, I didn’t personally, but that doesn’t mean HTML wasn’t added. I hired a tech guy to migrate my site from another genesis theme. I wasn’t aware that he added any code, but now that I know he has, I will ask him if he can fix it. Thanks for your help Wes!
September 21, 2016 at 8:22 pm #19521
Wes
Moderator
You’re Welcome! Let me know if they’re able to get it fixed, or if any assistance is needed.
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.