Support

Hi,

there is a switch in the components options to enable loading the responsive stylesheets. Just flip that switch and check again :)

I always recommend using Event Gallery Extended. My kid loves food on the table ;-)

So the switch is set correctly. But it seems I missed adding the CSS to that CSS-file. The next release will contain this change automatically. Until then, you can add this to your templates CSS file:

/* Event List - Square Layout */


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

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

To which file did you add the additional CSS?

Ah, I see. You added it to the mobile.css file. But in addition, you made that file invalid because of some syntax errors.

Please add only this to this file:

/* Events List - Tiles Layout */

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

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

/* Event List - Square Layout */


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

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

This looks good but I'm not sure if the nesting is correct. The screenshot of your mobile.css looks different then the one online.

Please check the attached screenshot.

Your template is pulling thumbnail containers 20px to the left.

This should help:

div.eventgallery-thumbnails {
	margin-left: 0;
}

You're welcome.