I have read and watched everything I can find, but still can't find a solution.
So, I need to make an array of thumbnails, the size of thumbnails stays the same. but when the browser size changes, the array changes its number of column, so as the number of rows, and everything below will move vertically accordingly, just like the old HTML. I will just need to modify the padding between the columns and rows. And when you click a thumbnail, a lightbox opens up.
This is so easy to do in HTML editor. Just a bunch of divs and simple CSS margins. But why is it so hard in Muse?
You will probably ask, why not just use the lightbox widget? I did try it, it does have the capability to auto-rearrange the thumbnails, but it has a few limits.
1. The thumbnail container and the thumbnails share the same resize option. It doesn't allow me to set the thumbnail to no resize and the container to responsive width and height. the result is, when the container shrinks, the thumbnail shrinks too.
2. Anything below the thumbnail container, including the footer, doesn't respond to the automatic height change of the thumbnail container.
I also tried to put images into a text block, but it lacks many padding and size controls.
Oh, an extra question. I was trying to add a scroll bar to the thumbnail array area, so when it reaches its longest height, instead of going super long, it gives you a scroll bar to scroll the array inside the container. Is that possible?
Any idea? Thank you so much! Deeply appreciated guys!