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. …
- davelevy.cc and the test page test.davelevy.info/mylinks/
- https://catswhocode.com/how-to-make-a-responsive-website/
- https://www.w3schools.com/html/html_responsive.asp
- 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%; }}
<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%; }}