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?
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.
At what viewport size should these transitions occur.
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.