Output screenshots for desktop and mobile
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 ...
Get Mastering Responsive Web Design now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.