Grow your CSS skills. Land your dream job.

Responsive CSS: filling all available width with images

  • # November 29, 2012 at 4:19 am

    Hi.

    I’m trying to make a responsive markup for a video gallery.
    Problem I’ve stumbled upon is illustrated by this example: http://codepen.io/anon/pen/IoyGt (please don’t mind those side columns, they’re hidden when screen is too small using media queries) – here I’m trying to make video images to take all available space with text-align justify, but as you can see spacing in rows differs and last element can be aligned only to right (doesn’t look good :S).

    Seems that I’m doing something totally wrong. My question is: how should I implement middle column?

    I understand I can use a table with a bunch of media queries, but it seems to be overkill and I hope to find some more dynamic approach.

    Thanks.

    # November 29, 2012 at 6:45 am

    Might be worth checking out Jquery Masonry. http://masonry.desandro.com/

    You could use CSS3 Columns, but browser support for older browsers is pants.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".