Out of the box, Event Gallery supports the responsive approach. It goes even further and fully supports the adaptive approach as well. You can adjust the size of images according to the available browser width by using simple CSS styles. In addition, Event Gallery will load exactly the right image size. No bandwidth is wasted on a single oversized thumbnail.

You have probably already noticed that this does not work for all layouts. The reason for this is quite simple. Event Gallery can’t guess your responsive break points. So you need to add them yourself. Just add a few new lines to your template’s CSS file. If this is too much effort, just enable the responsive CSS include in the component’s options.

Starting with Event Gallery 5.4.7, you can use the Breakpoint editor to add breakpoints to your site. This will generate CSS automatically.

Advanced users find some example code below.

/* Events List - Grid Layout*/
@media (max-width: 900px) {
	div#events .item-container {
		width: 50%;
	}
}

@media (max-width: 450px) {
	div#events .item-container {
		width: 100%;
	}
}

/* Events List - Tiles Layout */

@media (max-width: 900px) {
	.eventgallery-tiles .eventgallery-tiles-list .eventgallery-tile {
		width: 50%;
	}
}

@media (max-width: 450px) {
	.eventgallery-tiles .eventgallery-tiles-list .eventgallery-tile {
		width: 100%;
	}
}

/* Event List - Grid Layout */


@media (max-width: 900px) {
	#event .eventgallery-gridlist-tile {
		width: 50%;
	}
}

@media (max-width: 450px) {
	#event .eventgallery-gridlist-tile {
		width: 100%;
	}
}

/* Event List - Tiles Layout */

@media (max-width: 900px) {
	#event .eventgallery-tile {
		width: 50%;
	}
}

@media (max-width: 450px) {
	#event .eventgallery-tile {
		width: 100%;
	}
}

For column-based layouts, you can specify the width of a column with a percentage value. 100% will result in one item per row, 25% in four of them. With the help of the @media element you can define some conditions which control the encapsulated CSS styles. The example defines two breakpoints. One for browsers with a max width of 900px and one for a max width of 450px. Feel free to copy this code to your template’s CSS file and adjust it there.