Text wrap on images in list view

[Paul]

Hi

How do you force text to wrap round an image in List view?

When viewed on a mobile device, the text is wrapped like in image 2. All looks good.

In image 1, viewed on a Desktop:
– the text does not wrap
– the text seems to be in some sort of “narrow” wrapper, so it does not extend across the full width, unlike the text only entry below it.

Consistent text wrapping would be ideal, or failing that – at least having the accompanying text fill 100% of available horizontal space.. so it matches the other entries

thanks in advance

[Cliff]

Hi, Paul.

How this works depends on your “Default stylesheet used for events templates” setting at wp-admin > Events > Settings > Display tab

I believe the issue is from /wp-content/plugins/the-events-calendar/src/resources/css/tribe-events-full-mobile.css (probably the minified version on your site)

.tribe-events-list .tribe-events-event-image + div.tribe-events-content {
float: none;
position: relative;
width: 100%;
}

If you remove float:none; it falls back to float:left; which makes it consistent with wider browser windows.

Please let me know if adding this custom CSS solves the issue for you:

body.post-type-archive-tribe_events .tribe-events-list .tribe-events-event-image + div.tribe-events-content {
float: left;
}

You can add custom CSS code via your child theme’s style.css file or via a third-party plugin (not guaranteed or supported by us), like:

• SiteOrigin CSS (helps you visually build CSS selectors via its Inspector and Visual Editor, if that’ll help you)
• Simple Custom CSS
• Jetpack (supports regular CSS and the LESS and Sass pre-processors)

If you’re not a CSS expert, Jetpack’s Custom Design reference may prove helpful.

Please let me know how it goes for you.

[Paul]

Hi Cliff
Firstly, many thanks for the quick reply. I actually logged in to chase up a reply, not knowing you had been so prompt – I probably didn’t tick the box for email notifications! 🙂

Your specific CSS didn’t fix it for me, but it set me down the right path.
The offending line of CSS was in tribe-event-full.css

.tribe-events-list .tribe-events-event-image + div.tribe-events-content {
float: left;
position: relative;
width: 67%;
}

The 67% was forcing the content of the event to not fill the width of the container. Not sure why it would be set at 67%? Anyway, a change to 100% and it looks as I want it to.

Thanks

[Cliff]

Okay, great. Thanks for sharing your solution. Have a great week!

[Author]

Posts