-
Posts
-
Hi Support Team,
I am refering to this thread https://kriesi.at/support/topic/longer-words-in-columns-are-overlapping-in-mobile-devices/. As I mentioned there, in lists, contained in a column, longer words overlap the column. You can see it in a screenshot of a test I made for Ipad Air. This code from Ismael works fine for normal text fields and headings, words break and wrap onto the next line except in lists@media only screen and (max-width: 767px) { #top #wrap_all .all_colors h1, #top #wrap_all .all_colors h2, #top #wrap_all .all_colors h3, #top #wrap_all .all_colors h4, #top #wrap_all .all_colors h5, #top #wrap_all .all_colors h6 { word-wrap: break-word; font-size: 1em; } }And: I have no headings in the list, only normal text!
What must be completed in the above code to correct the overlapping?Best regards,
lebenspraxisHey lebenspraxis,
Please try this CSS instead:
.entry-content-wrapper div li { word-break: break-word; }Best regards,
RikardHey Rikard,
thank you for your quick answer! Your code didn’t work because “word-break” was not the right solution, it had to be “word-wrap” like in Ismael’s code.
So this could have been the right code:.entry-content-wrapper div li { word-wrap: break-word; }I tried it and the words broke and wrapped onto the next line. The only small issue that remained was that the words were not seperated by hyphens into syllables, but broke randomly between the letters. I wondered, if there was a way to achieve seperation into syllables and found a solution on the web. This works perfect for me:
.entry-content-wrapper div li { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }Best regards,
lebenspraxis
- You must be logged in to reply to this topic.