Problem with Masonry

[striderhiryux1]

Hi all,
I’m trying to make a masonry portfolio page, and its coming together nicely. However, I keep running into the issue of scalability,responsiveness, and alignment.

Basically, I have columns of images loaded into masonry, but the alignment of my div with all the image divs in it is floating left and thus as I shrink the width of my browser, I’m left with a lot of space on the right of the page until the columns collapse each time. Does anybody know how I can center my masonry content so that I’m left with an even amount of space on both sides as I collapse the browser to smaller width sizes?

Furthermore, this relates more to a CSS inquiry, but to make my website responsive and scale properly, would I have to come up with multiple separate style sheets or is there some more simplified method involving a singular CSS?

Thanks for any help into these matters!

[TheDoc]

For centering: http://masonry.desandro.com/options.html#isfitwidth

As for the responsiveness, you’ll want to look into media queries. I would certainly end up with a single stylesheet that you’re loading to your users but most professional front-end developers use some sort of pre-processor like LESS or Sass which means we’re able to set up lots of smaller files that all get built into one file on save.

So you might have something like:

/styles 
    _header.scss 
    _layout.scss
    _footer.scss
    _typography.scss
    _mixins.scss
    style.scss

Where style.scss includes all of the other stylesheets into it. http://sass-lang.com/guide

[Author]

Posts