In my last tutorial post, I described the reasoning for switching to a responsive theme for my website, as well as the logic that went into some changes that I made in layout. Going through the thought process, I’m now going to describe in a bit of detail how I created the responsive portions of the theme.

Template Structuring

The majority of the website was built upon my own framework, Amoeba, since I want to use my own work to test it out and find bugs to fix before public release. As such, there wasn’t much to do custom in terms of template. I created a custom portfolio page, using a Custom Post Type, as well as a slider that I may incorporate later.

CSS3 Media Queries

I made use of CSS3 Media Queries to handle resizing of the site. There were no majorly complex elements, so it didn’t need a great deal beyond turning some fixed-width elements into liquid, percentage based ones. While I could have done this differently, and did not resize every single element equally, I feel that it fits for my needs.

The elements are intended to fit on as many screen sizes as possible without having to do too many additional changes. I mainly use one query, for when the screen is less than 960px wide, which is the width of the main grid.

@media only screen and (max-width: 960px) {

	body {
		width: 100%;
		margin: 0 auto;
	}
	
	#wrapper,
	header,
	footer,
	.container,
	.header-wrap,
	.page-wrap,
	.footer-wrap,
	#home-top-bg,
	#container-wrap,
	#container-wrap #sidebar,
	article,
	.post,
	.post-content,
	#container-wrap,
	#container-header,
	#container-header-sidebar,
	#container-page,
	#container-footer,
	#container-footer-sidebar,
	#footer-bg,
	.about-widget,
	.about-widget img {
		width: 100%;
	}

... and so on
}

The main point of this is to have all of the elements maintain proper widths, paddings and margins when the browser window changes, and to change the layout slightly upon resize. When the window is too small, the sidebar falls below the main content, and each of the sidebar elements to take up the full width of the screen, as opposed to shrinking too much to be legible.

Conclusion

While I’ve been moving toward other design styles, such as fuller-width layouts on the more standard large-format monitors, this redesign serves my site well currently.

This tutorial was rather short, more of a thought process really, but I want to offer some value into getting things done with your website. Any questions? Feel free to ask away in the comments below, or contact me directly.

Republish