{"id":5689,"date":"2021-04-13T14:58:19","date_gmt":"2021-04-13T14:58:19","guid":{"rendered":"https:\/\/davelevy.info\/wiki\/?p=5689"},"modified":"2023-06-10T17:41:34","modified_gmt":"2023-06-10T17:41:34","slug":"responsive-web-sites-using-css","status":"publish","type":"post","link":"https:\/\/davelevy.info\/wiki\/responsive-web-sites-using-css\/","title":{"rendered":"Responsive web sites using CSS"},"content":{"rendered":"

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. …<\/p>\n

<\/p>\n

    \n
  1. davelevy.cc and the test page test.davelevy.info\/mylinks\/<\/a><\/li>\n
  2. https:\/\/catswhocode.com\/how-to-make-a-responsive-website\/<\/a><\/li>\n
  3. https:\/\/www.w3schools.com\/html\/html_responsive.asp<\/a><\/li>\n
  4. https:\/\/www.w3schools.com\/cssref\/css3_pr_mediaquery.asp<\/a><\/li>\n<\/ol>\n

    The code can be viewed using these sites, davelevy.cc and the test page test.davelevy.info\/mylinks\/<\/a>, here’s the crictical CSS and meta statements.<\/p>\n

    \n

    \r\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no\">\r\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\r\n<meta name=\"HandheldFriendly\" content=\"true\">\r\n\r\n#wholepage { padding: 10px; align: center; width: 400px; margin: auto;}\r\nbody { margin: auto; padding: 10px; align: center; font-family: Arial, sans-serif;}\r\n@media only screen and (max-width: 420px) { #wholepage { width: 85%; }}\r\n<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

    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…<\/p>\n","protected":false},"author":1,"featured_media":4066,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","_share_on_mastodon":"0"},"categories":[3],"tags":[251,253,1610,911],"class_list":["post-5689","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-css","tag-html","tag-responsive","tag-technology"],"share_on_mastodon":{"url":"","error":""},"jetpack_featured_media_url":"https:\/\/davelevy.info\/wiki\/wp-content\/uploads\/2009\/07\/html-from-makeuseof_com-w650c.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/5689","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/comments?post=5689"}],"version-history":[{"count":2,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/5689\/revisions"}],"predecessor-version":[{"id":8184,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/5689\/revisions\/8184"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/media\/4066"}],"wp:attachment":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/media?parent=5689"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/categories?post=5689"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/tags?post=5689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}