Responsive web sites using CSS

I decided to simplify my site at davelevy.cc and make it look like a linktr.ee 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. davelevy.cc and the test page test.davelevy.info/mylinks/
  2. https://catswhocode.com/how-to-make-a-responsive-website/
  3. https://www.w3schools.com/html/html_responsive.asp
  4. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

The code can be viewed using these sites, davelevy.cc and the test page test.davelevy.info/mylinks/, 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.