How to make existing Photo gallery module responsive?

If you use some of the concepts here:

http://www.prettypollution.com.au/pretty-codes/responsive-tables-in-bc

It is relatively straight forward

No,
This is just basics of CSS and media query stuff. That is really the barebones bits you need. The photo gallery renders as tables so making things block level elements, floating etc will allow them to be fluid.

Then for images you can google "making an image responsive" and you have heaps of examples.

Render the BC photo gallery into a hidden div, use it a data reference, write your own ways to display the data as liquid as you need it using the data from the table. The good thing about BC render is it is predictable therefore you can code your JS around that to display anyway you need.

I have a feeling when the modules are re-written as BC apps in the future (no idea when) they should be more modern coded and liquidable, but for now that it how I would do a liquid photo gallery.

Non Javascript method is the best option here in my view.

Liam: How would you go about that in CSS without javascript?

The link I put above maybe?

CSS - Every element has a default display type but every element can have its block level changed.

A span is an inline element but you can turn it into a block level element. A table element is a table or table cell display type but you can turn it into block level. This is all CSS2/1 stuff so cross browser compatible (but if your doing media queries and responsive the old browsers are not considered anyway) and very straight forward.

While I respect your answer to the question, these are still tables

In short here you're applying a percentage to the width to make them "responsive", ala HTML3 / 2001 style, while there is nothing wrong with that I assumed the person asking the question wanted a complete DIV based responsive system. If a percentage table is a correct answer then your answer is obvious and correct.

Actually, no, like I said, more to it then that.

With then being block level elements there is NO difference to the div based solution.

In terms of markup, the rendered markup, even with a javascript solution will still be tables because the scripting is happening in the dom.

So with the pure CSS solution you have better performance and there is no need for the scripting unless your doing extra modifications to its functionality.

Not disagreeing with you, if you want to re-jig a table in CSS like that, it's a solution to make it stretchable / responsive.