Can the gallery be made responsive?

Strangely, this does seem to be working as I would expect in Firefox, but no other browsers including iphone.

The gist of it is that I need :

#mla_gallery-2 .gallery-item {
float: left;
margin: auto;
text-align: center;
width: 100%;
}

Only when the screen is below 768px wide.

Here’s the issue: The CSS is being generated dynamically according to defaults or command line parameters, and what we need is some @media screen CSS to override that. Is there a way to make sure that the media calls override the default CSS?

Thanks for your question and especially for adding the “gist” of the styles you’d like to use. Responsive styles have come before (e.g. Variable gallery columns) but I haven’t been able to give a good answer until now.

You can define a custom style template to get the results you need:

1. Navigate to the Settings/Media Library Assistant Shortcodes tab.
2. Click on the “Style” view below the Search Templates text box.
3. Hover over the “default (default)” entry and click the “Copy” action link.
4. When the page refreshes, the “Edit Template” screen will appear. Change the template Name to (for example) “mobile”.
5. Scroll to the bottom of the Styles text box and add your responsive styles just above the last closing bracket. See my example styles below.
6. Scroll to the bottom and click “Update”.

Here are the styles I added to the default template:

@media screen and ( max-width: 800px ) {
	#[+selector+] .gallery-item {
		float: left;
		margin: auto;
		text-align: center;
		width: 50%;
	}
}

@media screen and ( max-width: 768px ) {
	#[+selector+] .gallery-item {
		float: left;
		margin: auto;
		text-align: center;
		width: 100%;
	}
}

I threw in an intermediate step at 800px just to give an idea of what’s possible. It works quite well on my test system.

Once you have the template set up you can add an mla_style=mobile parameter to your [mla_gallery] shortcode to replace the default styles.

I hope that gets you started on a solution for your application. I am marking this topic resolved, but please update it if you have any problems or further questions regarding custom styles for MLA galleries. Thanks for an interesting question and for your interest in the plugin.

This is wonderful, thank you David, especially for the step by step instructions on how to set up the CSS template. It’s exactly what I wanted. Is the Paypal donate button the best way to reimburse you for your efforts?

Thanks for our update with the good news and the kind words. Thanks as well for your offer to donate to our fair trade work and your very positive review!

Donations, reviews and positive feedback are great motivators to keep working on the plugin and supporting its users. Many of my enhancement ideas come from working on topics here in the forum. Yes, the Donate button is the way to go; thanks again.