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.

5 Replies to “Responsive HTML and CSS 2014”

  1. Hi, Glen, I found your code by chance on the link: https://wordpress.org/support/topic/reducing-width-of-sidebar-of-twenty-fiteen-theme?replies=21. I later pasted your code into CSS editor, it looks very nice on the computer, I am very happy. However, when I checked my website on the smart phone, it looks like something is wrong.

    The webpage just keeps changing the page size when I visited the home page. When I went to the next page under the category, the webpage was stuck as a small size of page. Could you help me take a look to solve this problem. Thank you very much!

    1. I am currently using Twenty Sixteen with the following custom css

      body.custom-background {
      	background-repeat: no-repeat;
      	background-size: 100% auto;
      	background-color: #005e01;
      }
      .site {
      	background-color: rgba(255,255,255,0.95);
      	border-radius: 10px;
      	max-width: 1280px;
      	margin: 21px auto;
      }
      @media only screen and (max-width : 1350px) {
      	.site {
      		margin: 21px;
      	}
      }
      .site-header {
      	padding: 2.25em 4.5455%;
      }
      

      Sorry, I don’t want to revert back to troubleshoot.

Leave a Reply