Treehouse: Grow your CSS skills. Land your dream job.

Responsive Image markup suggestions

  • # June 15, 2012 at 6:20 am

    I’m making my first responsive site and I have 5 image icons (each with a heading) I want to evenly line up horizontally beside each other in a 1140 width container. When the browser reduces I want the middle icon to disappear and the 4 other icons to drop in a position where where there are two in the top and two in the bottom directly underneath them. In mobile format, this will eventually become two icons.

    In the mark-up, should I create an unordered list for the images and headings and style accordingly or is it better to create separate containers for the icons and headings?

    Any suggestions or pointers would be great.

    # June 15, 2012 at 7:01 am

    What are the image dimensions?

    At what viewport size should these transitions occur.

    # June 15, 2012 at 7:07 am

    @Paulie_D Curretly images width & height: 100px. I was thinking that I could test the sizes once I start quarantining the viewport size.

    # June 15, 2012 at 7:16 am

    Here’s what I have so far :

    Obviously the figure width % are specific to your requirements but could be adjusted to adapt.

    Equally, the “div figure:nth-child(3)” is specific to your situation as it will hide every 3rd image.

    # June 15, 2012 at 7:29 am

    @Paulie_D. That’s brilliant. Many thanks for that. I really appreciate it!!

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

You must be logged in to reply to this topic.