Change List View layout to have pictures on left side and description on right

[Larissa]

Hello,

I would like the events section on my main page http://www.foodandwineevent.com and on my events page
https://www.foodandwineevent.com/events/

to look like how the events are posted here https://www.foodandwineevent.com/tag/san-francisco/
(picture on the left and description on the right)

Could I have some guidance, please? Thank you very much!! 🙂

[Cliff]

Hi, Larissa.

Here’s some CSS to get you started. Note it only applies to your /events page, not the shortcode version on your homepage — but it could be adapted to apply there as well. I also didn’t test it for responsive design (e.g. media queries):

body.post-type-archive-tribe_events .tribe-events-list .tribe-events-event-image {
float: left;
max-width: 37%;
}
body.post-type-archive-tribe_events .tribe-events-loop .tribe-events-content {
padding-right: 0;
}
body.post-type-archive-tribe_events .tribe-events-list .tribe-events-event-image+div.tribe-events-content {
float: right;
max-width: 60%;
}

Here’s a screenshot of it in action on a desktop width browser: https://cl.ly/2Z113y033h03

Please also note that we do not typically provide styling assistance and other customization help, per our Scope of Support / Terms.

 

If you need some coding help, you may want to ask your developer or reference our documentation and list of known customizers.

[Larissa]

Oh perfect!! Thank you for your help. 🙂
::bow down to you::

[Cliff]

You bet! 🙂

[Author]

Posts