Responsive Grid System | Tiffany R. White Blog

Responsive Grid System

Reading time: 1 min
<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: Minimal Web footer 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…

Share

No Ads. No Sponsored Content. Ever.

I've decided that I no longer want to have sponsored posts on this blog. I also, though as tempting as it may sound, don't want ads; even if I got big enough for Carbon ads I don't want them. I want to post free, engaging content for beginning/junior devs. This means that I won't have Setapp posts or affiliates on this blog, though I will keep them on the Uses page. If you enjoy the content, buy me a coffee. Just click the button below.




Webmentions 0

No webmentions were found.

Newsletter