Frames in Chart Templates

by cristiscu

HTML

<div class="outer">
  <div class="inner"><div class="inner2"><div class="frame">1</div></div></div>
  <div class="inner"><div class="inner2"><div class="frame">2</div></div></div>
  <div class="inner"><div class="inner2"><div class="frame">3</div></div></div>
  <div class="inner"><div class="inner2"><div class="frame">4</div></div></div>
  <div class="inner"><div class="inner2"><div class="frame">5</div></div></div>
  <div style="clear:both"></div>
</div>

CSS

body { padding:0; margin:0; }

.outer { width: 100%; margin: 0 auto;}

.inner { border: 1px solid blue; text-align:center; margin: 0 auto; }

.inner2 { width: 100%; margin: 0 auto;}
    
.frame { border: 1px solid red; width:100px; height: 50px; margin:10px; }
  
@media(max-width:440px) { .inner { width: 50% } }
@media(max-width:220px) { .inner { width: 100% } }