0

I want to use a grid system to display lots of icons. I learned this from a blog and put the code in a JSFiddle. I have made the grid system responsive on the JSFiddle example, but I don't understand two things.

Firstly, if I set the padding-top of the :before pseudo element to 120% or 60% the height changes, but since no height is specified anywhere else what is this height a function of? Is it related to font size or something else? It doesn't appear to be proportionate to the screen size.

Also, if I remove the margin-bottom : 2% selector from the CSS the entire grid system loses it's proportion and the height of the containers becomes much larger and erratic. Why is this?

The HTML is

<div class="container">
<div class="icons"></div>
<div class="icons"></div>
<div class="icons"></div>
<div class="icons"></div>
<div class="icons"></div>
<div class="icons"></div>
<div class="icons"></div>

<div class="gap"></div>
<div class="gap"></div>
</div>

and CSS

.container
{
    text-align : justify ;
    font-size : 0 ;
    background-color : #C0C0C0 ;
    padding : 2% 2% 0
}

.container:after
{
  content : '' ;
  display : inline-block ;
  width : 100%
}

.icons
{
  display : inline-block ;
  text-align : center ;
  margin-bottom : 2% ; 
  width : 49% ;
  background-color : blue 
}

.icons:before
{
  content : '' ;
  display : inline-block ;
  padding-top : 60%
}

.gap
{
  display : inline-block ;
  width : 49%
}
Troy Cost
  • 69
  • 1
  • 7

1 Answers1

1
  1. The margin/padding percentage is calculated from the element width.
  2. If you remove the margin the height doesn't change. The elements are all together so it looks like a very tall one.
Alvaro
  • 9,247
  • 8
  • 49
  • 76