Event Gallery

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 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 wasted bandwidth by just having one thumbnail size.

I’m sure you already recognized that 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 templates CSS file. If you feel like this is too much for you just enable the responsive CSS include in the components options. 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-simplelist-tile {
		width: 50%;
	}
}

@media (max-width: 450px) {
	#event .eventgallery-simplelist-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 defined some conditions which control the encapsulated CSS styles. The example defines two break points. 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 templates CSS file and adjust it there.