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.
Leave a Reply to LinCancel reply