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.


Comments

5 responses to “Responsive HTML and CSS 2014”

  1. Rounded borders at the narrowest size should go too, tiny blips of green show through.

    Happy holidays Glen.

    1. Glen Lipka Avatar
      Glen Lipka

      Thanks Bill. I’ll work on that. 🙂

  2. 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. Glen Lipka Avatar
      Glen Lipka

      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.

      1. Thanks for your reply, Glen. I found the solution on this link. https://css-tricks.com/forums/topic/responsive-site-not-responding/ Thank you.

Leave a Reply to Glen LipkaCancel reply