Skip to main content

Forums

This topic contains 4 replies, has 0 voices, and was last updated by  Alfie 5 years, 10 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #43922

    Alfie
    Member

    I have used masonry js before with fixed width blocks inside a container, and it work fine, don’t know if i am missing something but, i have a new site I’m working on – [Staff page](http://garypickles.com/lab/theteam.php “Staff Page”) – in this layout the width of each block is a percentage of the container, but that width/percentage changes with media quires as the browser resizes, this I can’t get to work with masonry as it seems to want fixed width content! the question is, can I use percent widths with masonry or is there an alternative method?

    This is my first fully responsive design, and the first time i have used SASS on a complete project, any general comments would be welcome.

    #130852

    TheDoc
    Moderator

    No problem! You just need to make sure masonry is changing when you resize the browser (though, really, that must be a very rare occurrence). http://masonry.desandro.com/demos/fluid.html

    #130895

    Alfie
    Member

    Have looked at this, and best i can figure out i have to commit to the number of columns used, but i need the number of columns to change depending on screen width for 1 to 4.

    #130930

    Alfie
    Member

    Did not have any luck, so i have changed the design, much happier with this layout, any comments on the whole site would be welcome….
    [Nikki Colins Hair Company…](http://garypickles.com/lab/theteam.php “Nikki Colins Hair Company”)

    #131162

    amooreTO
    Member

    If you want to change the number of columns depending on screen size you can try playing around with the jRespond plugin. It allows you to run different JS functions depending on the screen size you set.

    https://github.com/ten1seven/jRespond

    Hope this helps.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star