Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design [Solved] Fluid And Responsive Image Gallery

  • This topic is empty.
Viewing 7 posts - 16 through 22 (of 22 total)
  • Author
    Posts
  • #177905
    Anonymous
    Inactive

    The images are 153px wide. When space between images becomes too little, The last image would break into the next row and the re-adjust so that the new last image is at the right edge of the container, and the first image is at the edge of the left one. Exactly like this http://jsfiddle.net/danield770/Vfffg/16/

    #177906
    Paulie_D
    Member

    Here’s one to work with…where I threw in a media query too http://codepen.io/Paulie-D/pen/mDilA

    The math gets quite complex so I let the calc do the work but you need media queries for breakpoints based on the width of your images.

    However, this gets much easier with SASS & Mixins

    https://css-tricks.com/video-screencasts/132-quick-useful-case-sass-math-mixins/

    EDIT – Hmmm..just noticed your linked fiddle…looks pretty much like we came up with the same solution.

    #177954
    Anonymous
    Inactive
    #177960
    Paulie_D
    Member

    Looks like you found your answers then.

    Time to try it out and see if we can help you over the bits you struggle with.

    #178032
    Anonymous
    Inactive

    I was looking for this http://jsfiddle.net/danield770/Vfffg/16/

    I finally found a solution, implemented it and it was working perfectly. Then i tested it on multiple browsers and thats when it all went to shit. The browser compatibility for calc() isn’t very good. It’s times like these were i think the web is the worst of all software developing fields. Finally a working solution that can’t be used because stupid fucking browsers that should have died years ago are still being used by millions today. Fuck this shit.

    #178034
    Paulie_D
    Member

    OK then.

    :(

    #178148
    bearhead
    Participant

    elkroke, have you tried using masonry.js?

    Its normally used for organizing items of differing sizes into a grid, but theres no reason you couldn’t use it in your situation, if everything else has failed. Browser support is very good (ie8+ , all modern browsers)

    edit: I feel like the isFitWidth option in masonry might be what you need…
    An Anonymous Pen http://codepen.io/anon/pen/eivDz via @CodePen

Viewing 7 posts - 16 through 22 (of 22 total)
  • The forum ‘Design’ is closed to new topics and replies.