Responsive web sites using CSS

I decided to simplify my site at and make it look like a page. This is best done using CSS and so I used some very simple HTML, and a bit more complicated CSS. I used the viewport declarations and @media queries. (It’s not perfect yet and needs some more work). Here are my notes. …

  1. and the test page

The code can be viewed using these sites, and the test page, here’s the crictical CSS and meta statements.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

#wholepage { padding: 10px; align: center; width: 400px; margin: auto;}
body { margin: auto; padding: 10px; align: center; font-family: Arial, sans-serif;}
@media only screen and (max-width: 420px) { #wholepage { width: 85%; }}


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.