I am having a hard time making a responsive web site using Fotorama and Bootstrap. It took me a day only to figure out what was going wrong, and I hope that someone can help me finding a way to sort things out.
I have a simple Bootstrap layout with a Fotorama (fotorama.io) gallery, set to be responsive (data-width=100%). The gallery is set up to show thumbnails.
Everything works perfectly until I resize the browser (IE or Chrome, same result) to the "XS" Bootstrap size and reload the page.
At that point, Fotorama pictures are shown at a huge size, causing an horizontal scroll bar to appear. As soon as I resize the page to "SM" size Fotorama works correctly. If I resize back to "XS" things still work fine.
In other words, only if the page is originally loaded at "XS" size the problem appears, otherwise everything is fine.
I have tracked the problem down to finding out that if I set a small size for thumbnails (20 pixels or less) or I load just a few pictures (10 pictures instead of the 30 that I would normally load) the page works fine even at "XS".
How can this be corrected? And if it can't be corrected, can anyone suggest a way to display "iphone dots" at "XS" resolutions and thumbnails at higher resolution?
Thank you so much for your help!
Well, it took me a while to figure out -- actually an insane amount of time. So maybe this might be useful for someone else.
If you want things to work as expected, you must put a "table-layout:fixed" in the CSS:
body #wrapper-outer #wrapper {
display: table;
table-layout:fixed; //does it!
height: 100%;
position: relative;
width: 100%;
}
as shown on https://jsfiddle.net/Lxwthuxc/2/
That fixes, once and for all, the width of the page to the width of the first row of the CSS table (the header, in this case), and prevents the browser from taking the wrong decision when it comes to calculating the width of the div that contains the fotorama (or maybe the browser gets it right, but the result looks wrong anyway).