- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
What are the image dimensions?
At what viewport size should these transitions occur.
@Paulie_D Curretly images width & height: 100px. I was thinking that I could test the sizes once I start quarantining the viewport size.
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.
@Paulie_D. That’s brilliant. Many thanks for that. I really appreciate it!!