Categories
Uncategorized

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 on “Responsive HTML and CSS 2014”

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!

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 to Glen Lipka Cancel reply