-
Posts
-
Hi,
My website is: http://www.WisithJ.com and the home page looks good on desktop with two columns of blog posts. But on mobile, the longer words like “volunteering” and “perseverance” run into the other column or they disappear because of spacing issue. Is there a way a dash (-) can be put and have the words continue on the next line? I would like the columns to be evenly spaced and all words shown up.
This is how it looks on my iPhone:
Hey Wisith,
Thank you for using Enfold.
You can change how words break and wrap onto the next line, and you can also adjust the font size.
@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; } }Best regards,
IsmaelHi Ismael,
I put the code in. It helps…now all the words show because they’re smaller font. How can I adjust the font size from the code you posted? As of now, no words are wrapping because they are not that long. But if the words are long enough, they will wrap?
I see there is a footer now via mobile after I put your code in, the menu display looks off center. How can I fix this or not have the footer be shown at all in mobile?
Picture: https://imgur.com/ED4eC4g
Hi,
No, long words won’t overflow outside the container because the “word-wrap” property is set to “break-word”. They will break onto the next line when necessary. You can adjust the “font-size” value in the css code above if you want to change the text size.
Best regards,
IsmaelThank you.
What about the issue of: I see there is a footer now via mobile after I put your code in, the menu display looks off center. How can I fix this or not have the footer be shown at all in mobile?
Hey Wisith and Ismael,
I appologize for going in between! But I have the same issue with the breaking words. Your code, Ismael, works fine except in lists ( ol ) that I put in text areas. What must be completed in the code? Can you give me a hint?Best regards,
lebenspraxisHi,
@Wisith: The previous css code should not affect the footer menu because it targets headings. Use this css code if you want to remove the footer menu.@media only screen and (max-width: 767px) { #socket .sub_menu_socket div { display: none; } }
@lebenspraxis: Did you add any headings in your list? Please create a new thread and provide the link to the page. We would like to inspect it.Best regards,
Ismael
- You must be logged in to reply to this topic.