Responsive HTML and CSS 2014

I just upgraded to the new WordPress 4.1 with a new theme Twenty Fifteen.  I think it looks nice, but more importantly, it is the most responsive theme I have ever used.  It has many breakpoints and changes shape as the browser gets smaller. (Try it out)

However, on very large resolutions (1920×1080 on my desk), the style didn’t look perfect.  The sidebar was too wide and the widgets were not centered.  This was bothering me and I wanted to modify it.  However, the theme was using some very advanced (fancy-pants) CSS and HTML.  It used the ::before CSS which adds pseudo attributes into the DOM.  It also uses alot of @media queries which change the CSS depending on the size of the browser.

It took me a little while to get used to it and change it how I liked.  It’s been many years since I was full-time web development, so I have been getting rusty.  Here is the custom code I added.

.site-header { margin: 0;}
 .widget { margin: 10% 0;}
 .page-header { border-left: 0;}
 .hentry+.hentry, .page-header+.hentry, .page-header+.page-content { margin-top: 5%;}
 
 body:before { max-width: 413px;}

 #sidebar { left: 0;}
 #page { margin-left: 0;}
 @media screen and (min-width: 59em) {
   #masthead {
     margin-top: 10%;
   }
 }
 @media screen and (max-width: 59em) {
   #masthead {
     padding: 3%;
   }
 }

CSS sure has evolved since I first used it in 1997. I love the web. Thank you technology Gods for giving me a career and passion.

%d bloggers like this: