I have updated my main title recently on my homepage and it has caused a word break in mobile phones – I have a screen shot but cant see a way to upload it. The word ‘to’ is breaking.
I have the following custom css already in the theme options but it’s not working:
1 2 3 |
/* Non standard for webkit*/ h1, h2, h3, h4, h5, h6, .ish-h1, .ish-h2, .ish-h3, .ish-h4, .ish-h5, .ish-h6 {word-break: keep-all;word-break: break-word;word-wrap: normal;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;} |
The word break makes no sense as it would look much better to put the whole word on the next line net to the word ‘be’
Many thanks
Kat
]]>
1 2 3 4 5 6 7 8 9 |
media="all" h1, h2, h3, h4, h5, h6, .ish-h1, .ish-h2, .ish-h3, .ish-h4, .ish-h5, .ish-h6, .ish-sc_headline { word-break: keep-all !important; word-break: break-word; word-wrap: normal; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; } |
word-break ‘keep-all’ is not valid css supported by the theme so it’s throwing an error, so is webkit hyphens and hyphens ?
How is it possible to fix this in boldial as it looks unprofessional for a header title?
Many thanks
Kat
]]>Could you, please share the image via dropbox, google drive, https://imgur.com/, or even by uploading it to your WordPress site and using the link to share it.
What exactly are you trying to achieve and mainly what browser are you viewing your page on? The webkit definitions are only supported and “valid” on chrome/safari (and now opera) not other browsers.
Cheers
A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market
Thanks for getting back to me, here’s a link to the screenshot so you can see what is happening:
https://digitalclimb.co.uk/mobile-word-break/
It’s happening in Chrome on Android phones, a customer mentioned it to me yesterday – he has a Samsung Galaxy 5. My phone is a Sony Z3 Xperia
Thanks Kat
]]>How about using something like:
1 2 3 |
h1, h2, h3, h4, h5, h6, .ish-h1, .ish-h2, .ish-h3, .ish-h4, .ish-h5, .ish-h6, .ish-sc_headline { word-break: normal !important; } |
Cheers
A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market
I changed the css, and it changed the layout but the word ‘be’ is completely missing now, how is it so?!
upodated: https://digitalclimb.co.uk/mobile-word-break/
Thanks for the help,
Kat
]]>It is because there are hardcoded non breaking spaces inside the text:
Because You Deserve to be Found Online.
It should be:
Because You Deserve to be Found Online.
Cheers
A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market
I don’t think it is that, I added them as someone suggested to try it, but it made no difference. I have fixed it though by changing the font size to 66px from 60, I’ve tested on a few mobiles and tablets and all seems ok now.
Moving on now, life is busy busy…thanks for the help guys, great feedback from my site design btw, recommending when I can, I hope you’re doing well from it – you deserve it :)
Kat
]]>Great work. You solved it. I think this is the problem as this code tells the browser to always, no matter what, keep these three words together and never put a break on the place where the
entity is used. So Deserve to be
will be treated as one word and never will be separated if it is written as Deserve to be
.
Anyway. You found a solution and this is what counts! You are very welcome. We’re really pleased to hear you are happy with the theme and our work as we invested a lot of time and headaches to make it to the state it is right now. You may consider our newer themes as well in the future as each new one is better than the previous ones and contains more features ;)
Well, now it’s time to enjoy your brand new site!
Cheers
A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market