.entry-content ul on phone looks terrible

Hi @misaka1,

We appreciate you writing in,

We checked your site and it seems like the problem has occurred because of some issues in the format of the list that you have used.
Could you check your format and try to rearrange it? If the problem still occurs then please use the following Additional CSS code by going to Appearance > Customize > Additional CSS

.entry-content ul li{
word-break: break-all;
max-width: 420px;
}

The code above will try to fit the list to the maximum width of the screen and proceed to go on to the next line if it doesn’t. Hope this helps. Please write us back if this doesn’t work.

Regards,
ThemeGrill Support Team

Hello @bikku and thank you for your assistance.

I added the following code but when I set the max-width to 420px, then it messed up the pc version and was breaking it randomly at any character. I set it to ~645 and on pc it worked as before (on pc it always shows normally) but on phone it does not seem to do anything. It’s still breaking at any random character, so for example supernatural will have ‘l’ randomly on the next line. ??

I am not sure what to do.

• This reply was modified 3 years, 9 months ago by misaka1.
• This reply was modified 3 years, 9 months ago by misaka1.

Hi @misaka1,

The code that we provided works in such a way that the content will break at any place where the width of the screen is not enough for it to display.

We checked your site again on mobile devices and tried some solutions. Could you try to change the format of the content? For example, try changing the list
“Genres: Drama, Fantasy, Psychological, Thriller” to Genres: Drama , Fantasy , Psychological , Thriller by adding spaces before and after the commas. Hope this helps and feel free to write us back if it doesn’t.

Regards,
ThemeGrill Support Team

Hey @bikku ,

I guess that would work but that does not really look neat…

Is there a way to make it work so that it would go on the next line with a whole word instead of breaking it randomly at any character? It seems to have issues with commas, plain text without commas works normally. I have trouble understanding why.

Thanks

• This reply was modified 3 years, 9 months ago by misaka1.

Hi @misaka1,

We noticed that you have used some non-breaking spaces “&nbsp” on your list content as well. Because of that, all the spaces are also considered as text due to which the content is breaking randomly. Could you remove all the “&nbsp” and use normal spaces instead of them and check again, please? You can also go to the following link to learn about “&nbsp” and when and why to use them.

https://www.htmlbasictutor.ca/non-breaking-space.htm

Regards,
ThemeGrill Support Team

Hey @bikku ,

I am really not sure what you mean. I have never added any “&nbsp” nor edited my HTML directly, I only did some customization with Additional CSS and it did not involve “&nbsp”. I only changed my line-height and minor changes to appearance.

.entry-content li {
	line-height: 2em
}

This is the only thing I altered, along with changing it to disc-style from square.

I have no idea what that is, to be honest, nor where I can find it…

Thanks

I finally found the answer to this.

For anyone wondering, this is caused by WordPress inserting “&nbsp” instead of normal spaces if I copy it from some site directly to the editor.

I am not sure how to stop this from happening but it’s fixable by copy-pasting it first to Notepad and then copy-pasting that text into WP editor.

Hi @misaka1 ,

We are glad to know that your problem has been solved. And if you check our previous reply, that’s exactly what we meant when we mentioned the problem about the use of “&nbsp”. It considers the spaces as text as well. Because of this, the words were randomly breaking on your list content.

Please write to us again if you face any other difficulty in the coming days.

Regards,
ThemeGrill Support Team