Forums

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

Home › Forums › CSS › Responsive Icon Issue…

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • March 10, 2017 at 3:46 pm #252630
    knbfoster
    Participant

    Hello,
    I have a website where I have 9 icons listed horizontally. When it’s viewed on a smaller screen it will drop each icon one-by-one to the next line. This looks really funny so I would ideally like to have 4 drop down to the next line at a time. In other words, the icons would be grouped together so they wouldn’t drop to the next line alone.

    I can’t seem to figure this out and would appreciate any insight.

    Here’s the code: http://codepen.io/knfoster/pen/XNVeaB?editors=1100

    Thank you!

    March 11, 2017 at 12:27 am #252633
    Beverleyh
    Participant

    So at the point where 1 would drop below, you instead would like 4 to drop below?

    Have a look into media queries. Set one for the screen width where the 1st icon drops, and try applying a max-width on #icons to force the grid to become 4 icons deep at that stage.

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