Search code examples
javascriptcssresponsive-designcss-transformsjquery-isotope

Need help horizontally centering elements which are dynamically positioned with Javascript

Here is the website I'm working on: https://frankli-n.github.io/portfolio/memsmosaics/filter/filterable-gallery/dist/m_index.html#gallery

The image section is responsive - as you narrow the window you get less image columns. The problem is these columns aren't centred. I want them to always be horizontally centred inside the window. This is particularly important for the aesthetics on the mobile view.

This must have something to do with how the <img> tags are being positioned in the <div id="gallery-content-center"> and it is complicated for me because the <img> tags have dynamically changing positioning with the transform property which allows them to jump columns when they are cut off.

style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 258px, 0px);

Here's a screenshot of the window at a width where the images are clearly not centered and the img tag (for the red top right picture) transform positioning is highlighted in the inspect. enter image description here

Any help would be greatly appreciated!

Solution

  • Here how you should do considering your case:

    #gallery-content-center {
    margin: 0 auto;
    width: 1240px;
    float: none;
}

@media screen and (max-width: 1250px) {
    #gallery-content-center {
        width: 930px;
    }
}

@media screen and (max-width: 960px) {
    #gallery-content-center {
        width: 620px;
    }
}

@media screen and (max-width: 670px) {
    #gallery-content-center {
        width: 310px;
    }
}