{"id":887,"date":"2021-02-07T02:36:36","date_gmt":"2021-02-07T02:36:36","guid":{"rendered":"https:\/\/dft.wiki\/?p=887"},"modified":"2021-02-07T16:16:17","modified_gmt":"2021-02-07T16:16:17","slug":"responsive-web-design","status":"publish","type":"post","link":"https:\/\/dft.wiki\/?p=887","title":{"rendered":"Responsive Web Design Tips"},"content":{"rendered":"

BASIC PAGE LAYOUT 1<\/p>\n

\"\"<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<style>\r\n* {\r\nbox-sizing: border-box;\r\n}\r\n.menu {\r\nfloat:left;\r\nwidth:20%;\r\ntext-align:center;\r\n}\r\n.menu a {\r\nbackground-color:#e5e5e5;\r\npadding:8px;\r\nmargin-top:7px;\r\ndisplay:block;\r\nwidth:100%;\r\ncolor:black;\r\n}\r\n.main {\r\nfloat:left;\r\nwidth:60%;\r\npadding:0 20px;\r\n}\r\n.right {\r\nbackground-color:#e5e5e5;\r\nfloat:left;\r\nwidth:20%;\r\npadding:15px;\r\nmargin-top:7px;\r\ntext-align:center;\r\n}\r\n\r\n@media only screen and (max-width:620px) {\r\n\/* For mobile phones: *\/\r\n.menu, .main, .right {\r\nwidth:100%;\r\n}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body style=\"font-family:Verdana;color:#aaaaaa;\">\r\n\r\n<div style=\"background-color:#e5e5e5;padding:15px;text-align:center;\">\r\n<h1>LOGO<\/h1>\r\n<\/div>\r\n\r\n<div style=\"overflow:auto\">\r\n<div class=\"menu\">\r\n<a href=\"#\">Option A<\/a>\r\n<a href=\"#\">Option B<\/a>\r\n<a href=\"#\">Option C<\/a>\r\n<a href=\"#\">Option D<\/a>\r\n<a href=\"#\">Option E<\/a>\r\n<\/div>\r\n\r\n<div class=\"main\">\r\n<h2>Content<\/h2>\r\n<p>Center of the page with the web site content.<\/p>\r\n<\/div>\r\n\r\n<div class=\"right\">\r\n<h2>Info<\/h2>\r\n<p>More information at this side.<\/p>\r\n<\/div>\r\n<\/div>\r\n\r\n<div style=\"background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;\">\u00a9 copyright EXAMPLE.COM<\/div>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
BASIC PAGE LAYOUT 2<\/p>\n
\"\"<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<title>TITLE<\/title>\r\n<meta charset=\"utf-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.1\/css\/bootstrap.min.css\">\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\">\r\n<div class=\"jumbotron\">\r\n<h1>Title<\/h1>\r\n<p>Sub-title!<\/p>\r\n<\/div>\r\n<div class=\"row\">\r\n<div class=\"col-sm-4\">\r\n<h3>Column A<\/h3>\r\n<p>Text<\/p>\r\n<\/div>\r\n<div class=\"col-sm-4\">\r\n<h3>Column B<\/h3>\r\n<p>Text<\/p>\r\n<\/div>\r\n<div class=\"col-sm-4\">\r\n<h3>Column C<\/h3>\r\n<p>Text<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
VIEWPORT META<\/p>\n
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/pre>\n
IMAGES<\/p>\n
<img src=\"img_girl.jpg\" style=\"max-width:100%;height:auto;\"><\/pre>\n
SEE ALSO<\/p>\n
CSS Cheat Sheet [Link<\/a>]<\/p>\n
JS Cheat Sheet [Link<\/a>]<\/p>\n","protected":false},"excerpt":{"rendered":"
BASIC PAGE LAYOUT 1 <!DOCTYPE html> <html> <head> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <style> * { […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-887","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/dft.wiki\/index.php?rest_route=\/wp\/v2\/posts\/887","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dft.wiki\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dft.wiki\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dft.wiki\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dft.wiki\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=887"}],"version-history":[{"count":6,"href":"https:\/\/dft.wiki\/index.php?rest_route=\/wp\/v2\/posts\/887\/revisions"}],"predecessor-version":[{"id":908,"href":"https:\/\/dft.wiki\/index.php?rest_route=\/wp\/v2\/posts\/887\/revisions\/908"}],"wp:attachment":[{"href":"https:\/\/dft.wiki\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dft.wiki\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=887"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dft.wiki\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}