Grow your CSS skills. Land your dream job.

Scaffolding Images

  • # January 10, 2013 at 12:53 pm

    Hi!

    I was wanting to know how this effect was achieved across this website. The images jump and resize (pop) to a defined size when the browser size changes.

    http://elanaschlenker.com/

    Any ideas on how this is achieved, I’m hoping to implement something like this. Greatly appreciated!

    Cheers
    Niplo!

    # January 10, 2013 at 1:31 pm

    It is using css media queries. See – [Responsive design](http://css-tricks.com/video-screencasts/102-braindump-on-responsive-web-design/ “Responsive design”)

    # January 10, 2013 at 2:22 pm

    Thanks for pointing me in the right direction!

    So basically it’s just defining properties in the css within various media queries:

    eg:

    @media only screen and (min-width: 960px) {

    .box { width:720px; }

    }

    # January 11, 2013 at 1:58 pm

    Yes it is. CSS specifically for the width of the browser!

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

You must be logged in to reply to this topic.

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