{"id":11,"date":"2023-02-03T21:44:54","date_gmt":"2023-02-03T21:44:54","guid":{"rendered":"http:\/\/tenminutetutorial.com\/?p=11"},"modified":"2023-02-03T21:47:08","modified_gmt":"2023-02-03T21:47:08","slug":"very-simple-responsive-web-design","status":"publish","type":"post","link":"http:\/\/tenminutetutorial.com\/index.php\/2023\/02\/03\/very-simple-responsive-web-design\/","title":{"rendered":"(very) Simple Responsive Web Design"},"content":{"rendered":"\n<p>It&#8217;s no secret that mobile devices are everywhere; according to <a href=\"https:\/\/www.oberlo.com\/statistics\/mobile-internet-traffic\">https:\/\/www.oberlo.com\/statistics\/mobile-internet-traffic<\/a>, <strong>59.4%<\/strong> of Internet Traffic is from mobile devices. There are a few challenges to designing for a mobile device. For one, we (as designers) have to worry about file sizes again, due to bandwidth restrictions (dial up modem speeds, anyone?).<\/p>\n\n\n\n<p>The other major challenge is the screen sizes. A website designed for a laptop\/desktop generally has a lot of leeway in terms of the way things are laid out. For mobile, though, it presents some challenges and requires a new(ish) term: Responsive Design. <\/p>\n\n\n\n<p>This is very easy to accomplish. It requires just a few lines of code to be added to your files.<\/p>\n\n\n\n<p>First, the HTML file:  Put this line in the head section of your document.<\/p>\n\n\n\n<pre class=\"wp-block-verse\">&lt;meta name=\"viewport\" content=\"width=, initial-scale=1.0\"&gt;<\/pre>\n\n\n\n<p>Next, in your CSS file, add this line:<\/p>\n\n\n\n<pre class=\"wp-block-verse\">img { max-width: 100%; height: auto; }<\/pre>\n\n\n\n<p>The other part is with your CSS file, you&#8217;ll need to add two sections: One for small devices and the other for larger screens:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>@media screen and (max-width: 479px) { <\/p><p>  .UX_Buttons { <\/p><p>     display: flex; <\/p><p>     flex-direction: column; <\/p><p>  } <\/p><p>}<\/p><\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>@media screen and (min-width: 600px) {<\/p><p>  .UX_Buttons { <\/p><p>     display: flex; flex-direction: row; <\/p><p>     flex-wrap: nowrap; <\/p><p>     justify-content: space-around; <\/p><p>  } <\/p><p>}<\/p><\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>If this css code is like Greek to you, please go to <a href=\"http:\/\/beyondthetutorial.com\">http:\/\/beyondthetutorial.com<\/a> and look for the CSS course.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s no secret that mobile devices are everywhere; according to https:\/\/www.oberlo.com\/statistics\/mobile-internet-traffic, 59.4% of Internet Traffic is from mobile devices. There are a few challenges to designing for a mobile device. For one, we (as designers) have to worry about file sizes again, due to bandwidth restrictions (dial up modem speeds, anyone?). The other major challenge&hellip; <a class=\"more-link\" href=\"http:\/\/tenminutetutorial.com\/index.php\/2023\/02\/03\/very-simple-responsive-web-design\/\">Continue reading <span class=\"screen-reader-text\">(very) Simple Responsive Web Design<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,2],"tags":[],"_links":{"self":[{"href":"http:\/\/tenminutetutorial.com\/index.php\/wp-json\/wp\/v2\/posts\/11"}],"collection":[{"href":"http:\/\/tenminutetutorial.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/tenminutetutorial.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/tenminutetutorial.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/tenminutetutorial.com\/index.php\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":2,"href":"http:\/\/tenminutetutorial.com\/index.php\/wp-json\/wp\/v2\/posts\/11\/revisions"}],"predecessor-version":[{"id":13,"href":"http:\/\/tenminutetutorial.com\/index.php\/wp-json\/wp\/v2\/posts\/11\/revisions\/13"}],"wp:attachment":[{"href":"http:\/\/tenminutetutorial.com\/index.php\/wp-json\/wp\/v2\/media?parent=11"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/tenminutetutorial.com\/index.php\/wp-json\/wp\/v2\/categories?post=11"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/tenminutetutorial.com\/index.php\/wp-json\/wp\/v2\/tags?post=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}