Fluid Breakpoint Consistent Thumbnail Spacing

[jwsayman]

I have a gallery setup made from the lightbox composition widget. I have three breakpoints, when I resize the browser (see video) in the first breakpoint the images overlap each other, in the next they resize but stay in their relative height on the page so they get further away from each other, and in the last breakpoint the images and the gaps between them resize. How do I make it so that the spacing is maintained through all resizings of the browser not just within the last breakpoint?

[Nancy OShea]

Muse has been End of Life for over 1 year.  Nobody should be using it anymore.  Best advice, rebuild your site with another web authoring software or service that's in active development.  Muse is no longer supported.

Ideally, you should build one responsive website that fits ALL devices.  Dreamweaver with Bootstrap starter templates is one option.   Below is a working example.  View source in your browser to see the code.

https://alt-web.com/GALLERY/Masonry-Gallery.php

[fotoroeder]

To get this masonry in fluid width breakpoints is quite tricky and has to do with frames connecting the images and must be all set to responsive in width and height - but I recommend to use fixed widht breakpoints instead and make it pixelperfect as you need it.

Be aware that pinning elements and setting them responsive in width and height at the same time does not work as intended.

You may have a look here at my test-site-in-progress: https://steinmetz-binder.de/2021/steinmetzarbeiten.html

and may have a look at the other pages, too to see the difference. My mentioned page is set up with frames (F), filled with images and the rectangles (M), connecting them are exactly placed to touch both images. These are necessary for images from  top to bottom to keep the vertical distance responsive. If you leave them away the vertical distance changes when reducing the browser wndows width. In  my test page I also set the (m) rectangles for the horizontal distance but these (as I found out) are not necessary but may be necessary in your case.

Of course you will still need some breakpoints as the distance from your header to the elements will change - could be set to "stay in place" by another (m) responsive in width and height placed exactly above your masonry all the way to the top of the page but of course you must take care of the header elements. That alltogether is the reason for me to go with fixed width breakpoints. One gets much more control of everything.

But anyway - on my screenshot you can see the orange rectangles which connect the images in theit verical distance.

Kind Regards,

Uwe