Event Espresso Homepage Widget

[Dave Funderburke]

I am not sure if this is something you can help with with or if I need to reach out to Event Espresso.

On the homepage I am using the Event Espresso Upcoming Events widget to display the information about our upcoming fundraisers.

However, I would like the widget to display across the entire width of the screen instead of in a line down the page. (I understand this will not be the case on smaller devices)

I have tried moving this widget around to various places in the setup and no matter where I place the widget it is still vertical when viewing on a desktop.

[Bill Robbins]

Hi Dave,

You can make that widget full width if you want to. Add this snippet to the Custom CSS that’s at the bottom of the styling tab in the theme options page:

#home-widgets .widget.widget_ee-upcoming-events-widget {
	width: 100%;
}

That should make the widget full width. If you run into trouble, let me know.

Take care,
Bill

[Dave Funderburke]

This is not working. I cannot tell that anything I am adding to the Custom CSS is working. I tried this, a variation of this, and the sponsor widget title bar code you gave me and none of it is working.

[Bill Robbins]

Hey David, are you clearing out your site’s cache after making changes. Generally it’s a good idea to disable caching when making changes. Then turn it back on afterwards. Otherwise you may find yourself correctly making changes, but not being able to see them due to the cache. It also makes it easier for me to troubleshoot since the code is readable.

Bill

[Dave Funderburke]

Yes I was clearing after changes and changing browsers.

I have just turned it completely off for now.

[Bill Robbins]

Thanks Dave. This section is missing a closing bracket:

@media only screen and (max-width: 1024px) {
	
	#navigation {
		height: auto;
	}
	
	#mobile-menu ul,
	#nav-left ul.menu {
		display: none;
	}
	
	#mobile-menu { 
		display: block;
	}
	
	select.tinynav {
		border: none;
		float: left;
		border-radius: 0;
		-webkit-appearance: none;
		-webkit-background-clip: padding-box;
		padding: 10px 20px;
		margin-top: 0;
		margin-bottom: 0;
		margin-left: 0;
	}

You’ll need to add a

}

to close out that media query before starting the next. I’m attempting to do this on my phone as I’m away from my computer at the moment. I did spot that.

Bill

[Dave Funderburke]

Thanks – That fixed it.

[Bill Robbins]

Fantastic. Take care Dave.

[Author]

Posts