This is a premade portfolio site enhanced with a mobile-responsive layout. The premade portfolio contains the following pages: About, Portfolio and Contact.
Three media queries at the bottom of styles.css reflect max-widths of 980px, 768px and 640px.
- 980px is used so none of the content will be cut off. Since the desktop layout is approximately 960px wide, the media queries activates before the content gets cut off.
- 768px is the width of a tablet.
- 640px is the width of a phone in landscape.
The position of the header is static (the default positioning) when the screen is 640px wide. The header design takes up a lot of room; and does not stick to the top of a small screen which would leave no room for the rest of your site.
A viewport tag is also included in all of the HTML files so the media-queries function as expected on mobile devices, which includes the exact pixels for the container.
Using the Chrome extensions Window Resizer and Browser Width will allow the user to see the browser dimensions in Chrome.
- Joey Badua - Wireframe