-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Mastering Responsive Web Design
By :

The following screenshots represent a prototype/demo both in the wireframe and styled modes. You'll be able to see both the desktop (980-pixels wide) as well as mobile (320-pixels wide) outputs.
In the wireframe screenshots, the white outlines and the gray backgrounds in different tones are basically visual cues to help you understand where the boundaries of each element are without having to use a browser's DevTools.
The styled screenshots, on the other hand, show you what can be accomplished with a small does of CSS. Both the wireframe and styled pages use exactly the same markup.
The demos of the pages can be seen here:
Visit http://codepen.io/ricardozea/pen/717c6ab2dab9646f814f0429153a6777 for the wireframe page
Visit http://codepen.io/ricardozea/pen/244886bac2434369bd038294df72fdda for the styled page
Let's see the screenshots.
The desktop output [wireframe] is as follows:
The desktop output [styled] is as follows:
The mobile output [wireframe] is...
Change the font size
Change margin width
Change background colour