Flying memes

I recently created a small website called ‘La piccola biblioteca della natura’ to showcase some of my girlfriend watercolors. I decided to go for a responsive design and set up some nice media-query statements. If you try to resize the browser window you surely notice how the structure of the fruits change in response to this operation.

 

To archive this result I played a bit with clear and float properties by adding them to some specific elements, here’s a sample:

The .cestello HTML structure:

<div class="cestello">
    <div>
        <a href="#arancia" onclick="PB.to('#arancia');return false;">
            <img src="img/arancia-small.png" alt="arancia">
        </a>
    </div>
    <div>
        <a href="#banana" onclick="PB.to('#banana');return false;">
            <img src="img/banana-small.png" alt="banana">
        </a>
    </div>
    <!-- other divs -->
</div>

And the corresponding CSS code:

.cestello{
  float:left;
  width: 100%;
}

@media screen and (min-width:480px) and (max-width:960px){
  .cestello div{
     width: 33%;
  }
  .cestello div:nth-of-type(3){
    clear: right;
  }
  .cestello div:nth-of-type(4){
    clear: left;
  }
}

@media screen and (max-width:480px){
  .cestello{
    float:none;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .cestello div{
     width: 50%;
  }
  .cestello div:nth-of-type(even){
    clear: right;
  }
  .cestello div:nth-of-type(odd){
    clear: left;
  }
}

Here you find the three statuses in which the ‘.cestello’ structure may be found. By using some clever CSS3 selector I’m able to inject ‘clear:right’ and ‘clear:left’ and change the aspect of the page.