Need Events List widget to be horizontal grid view or horizontal list view

[ericlepping]

Hello,
I’m trying to use the Events List widget but rather than show a vertical list I’d like to show a horizontal/grid view in a single row. The page where I’m trying to achieve this is http://artc.sherpalab.com/

I found a tutorial online and was able to use some functions.php changes to show thumbnails but the CSS changes are not taking effect.

Creating a Horizontal List Widget with Featured Images in Events Calendar Pro

Is there a relatively simple way to have 4 events show horizontally rather than vertically? I’d be happy to use either a widget or a shortcode to accomplish this.

Thank you!

[Geoff]

Hello Eric, thanks for getting in touch!

Man, that’s a nice tutorial you shared. I’ve bookmarked it to keep on my radar for other instances where it might come in handy. 🙂

I think that should get you started in the right direction. The biggest roadblock I see is that the widget area that you’ve placed your event widget in is set to a specific width of 195px. Here’s the CSS from your theme:

.et_pb_widget {
width: 195px;
}

You’ll need to play around with your theme’s CSS to get things just right, but removing that width restriction is a good first step. From there, you can set each event to 25% of the space and have them stack horizontally using float: left.

You asked if there is a simple way to do do this. I think it would be relatively simple, but not as simple as using a widget or a shortcode. It will certainly take wrangling your theme’s CSS a bit or possibly customizing the widget with your own CSS to make it happen.

Cheers!
Geoff

[ericlepping]

Thanks a ton for the reply Geoff!
Working on this and wondering if I can figure out an easier way…

Is there a shortcode for the Calendar List? I’m searching the site here and can’t find that…
Thanks!

[Geoff]

Good question. There is a shortcode for the calendar list, but it’s only available on a third-party plugin called Event Rocket. We don’t support that plugin here, but it will definitely give you the shortcode for a list widget.

Cheers!
Geoff

 

[Geoff]

Hey Eric! Just checking in to see if you got everything you needed here or if you have follow-up questions here about layout and shortcodes–let me know!

[ericlepping]

Thanks Geoff! The issue is resolved and the calendar is looking good on my client’s site. The fix I found should help on another site that I’m starting to develop now. Looks like I’ll need another Pro license shortly 🙂

[Geoff]

Sweet! Thanks for following up Eric–we’ll be here if and when you need more PRO. 🙂

Cheers!
Geoff

[Author]

Posts