Join Morten Rand-Hendriksen for an in-depth discussion in this video Creating a responsive frame, part of WordPress: Building Responsive Themes.
- View Offline
When you start building a responsive theme the first thing you need to do is make sure …the frame--so the outer edges of this entire site--is responsive so than when you resize …the browser the content inside starts flowing instead of staying the same. …As you can see from this demo, you'll see that currently, it does not flow. …So this is not responsive frame. …This also gives you a preview of the more in-depth media query tweaking we'll do for …the rest of the course, and I'll also get a chance to show you how I used the Web Developer …tools in Chrome to figure out what styles I need to tweak.…
To make the frame responsive, we need to work with the style.css file that's found inside our theme. …So I'll go to my WordPress installation on my computer, go to wp-content/themes, then …Anaximander, and then find style.css down here at the bottom, and I'll open that in my code editor. …If we go back to the browser, I'll do right- click on some of the content in my page and select …Inspect element to open the Code Inspector. And from here I can highlight different sections …
- What is responsive design?
- Installing the Anaximander example theme
- Deciding what screen sizes to target
- Designing menus
- Adding responsive images and video
- Using CSS media queries to apply different styles
- Handling sidebars on mobile displays
- Dealing with footer widgets
- Installing jQuery Masonry