Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive Image markup suggestions

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #38514
    tobeeornot
    Member

    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.

    #104422
    Paulie_D
    Member

    What are the image dimensions?

    At what viewport size should these transitions occur.

    #104423
    tobeeornot
    Member

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

    #104424
    Paulie_D
    Member

    Here’s what I have so far : http://jsfiddle.net/Paulie_D/qYbGM/2/

    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.

    #104426
    tobeeornot
    Member

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.