Advertisement
by Adi Purdila
Difficulty:BeginnerLength:QuickLanguages:
This post is part of a series called Adaptive Blog Theme: From Photoshop to HTML & CSS.
At this point in our theme development it's time to look at the adaptive nature of the layout. We're going to examine our breakpoints, tidy up the layout in its various states, deal with the navigation and any images we encounter. Notably, this is the last of the screencasts before we dive into WordPress theming!
Note: When I refer to the word responsive, I often really mean adaptive (sorry, force of habit!) Responsive layouts involve fluid dimensions; ours offers a series of fixed-width layouts for screens wider than 767px, making it technically adaptive.
First Look at the Breakpoints
The Last of the Breakpoints
Adaptive Images
Advertisement
Weekly email summary
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Advertisement
Translations
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this postPowered by

Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.