Words Break next to Featured image

KCMiller401
(@kcmiller401)

3 years, 6 months ago

I am building a Yoga Blog site http://thebodyistalking.com . It is fine on my desktop and tablets, but on the smallest (vertical phone) screens the featured image shows correctly on the left but the text to the right of that shows only one or 2 letters on each line. The words are breaking in the middle! After reading other forum posts I have deleted the content and replaced it with content that has been stripped of formatting, have switched to classic editor and pasted as text, and have even retyped the content to make sure there is no errant formatting, but the problem persists. Altering the size of the featured image does not change the word spacing either. On another phone the first 2 whole words appear next to the image (on 2 lines) and then the 3rd (longer) word starts the rest of the text below the image.

Do you have ideas of what could be causing this and how I can fix it?

Thank you.

The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

lisa
(@contentiskey)

3 years, 6 months ago
ask the theme’s support team if they can suggest CSS fix or template function or other fix for smaller device display. https://weavertheme.com/
maybe change the alignment of image from alignleft to alignnone when the display is in small device?
maybe theme support team can suggest best css change to fill the available space 100%.
- This reply was modified 3 years, 6 months ago by lisa.
Moderator Steven Stern (sterndata)
(@sterndata)

Forum Moderator

3 years, 6 months ago
Try this:
```
img.featured-image.fi-post_full-content-top.fi-content-top.hide-none.fi-alignleft.wp-post-image {
    max-width: 50%;
}
```
You may have to add some @media overrides if you want it wider when the screen gets wide enough.

To add or override CSS: use the “Additional CSS” option in the customizer. https://codex.wordpress.org/CSS#Custom_CSS_in_WordPress

Learn to use the Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS.
Thread Starter KCMiller401
(@kcmiller401)

3 years, 6 months ago

Thank you both. I will take it up with the theme support group, but, Steve, do you use the developer tools on your phone? I do all the time on my full screen but did not think even to look for them on the mobile screens. Where would I find them?

Thanks again to both of you,
Kimberly

Moderator Steven Stern (sterndata)
(@sterndata)

Forum Moderator

3 years, 6 months ago

No, not on my phone. Use the phone simulator on mobile tools

See https://i.imgur.com/W0riQ7w.png

Thread Starter KCMiller401
(@kcmiller401)

3 years, 6 months ago

I did not know about that – Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Words Break next to Featured image’ is closed to new replies.

Views