1 min read

<div class="section group">
 <div class="col span_1_of_3">This is column 1</div>
 <div class="col span_1_of_3">This is column 2</div>
 <div class="col span_1_of_3">This is column 3</div>
</div>



<div class="section group">
 <div class="col span_1_of_3">This is column 1</div>
 <div class="col span_1_of_3">This is column 2</div>
 <div class="col span_1_of_3">This is column 3</div>
</div>






This whole mess broke the very thing I was trying to do with the footer of my site. Why does responsive code have to be so verbose? The main complaint, it seems from devs who are tons more experienced than me, is that it is slower loading. I mean, I guess if you traverse around the interwebs, you will see complaints about slow responsive sites.

I copied the code, just as expected. Tweaked the margins of the columns but yet the footer background color I wanted just didn't span the width of the body. I edited all the css and I still couldn't get it right, Googled like a fiend, copied this, tweaked that and until I deleted the responsive code my footer was a mess.

My friend Piper helped me out but somewhere in my HTML there is a problem. We decided that using this:



<footer>
 <div></div>
   <div></div>
     <div></div>
</footer



<footer>
 <div></div>
   <div></div>
     <div></div>
</footer






for the HTML and

footer div { width: 30%, margin: 4.5% } display: inline-block 

for the CSS would get the desired effect, which is a footer that looks like this:



But it didn’t turn out like that. I am packing up a zip file and sending my horrendously indented code off to her. I have been at this the entire day, from 11 am to 6 PM. This is when being a developer tests all your mettle…