{"id":386,"date":"2014-02-19T23:31:23","date_gmt":"2014-02-20T04:31:23","guid":{"rendered":"http:\/\/art.buffalo.edu\/coursenotes\/art320\/?page_id=386"},"modified":"2026-02-05T18:18:50","modified_gmt":"2026-02-05T23:18:50","slug":"exercise-3-part-3-responsive-css","status":"publish","type":"page","link":"https:\/\/ubwp.buffalo.edu\/art320\/exercises\/exercise-3-building-a-site-with-html-and-css\/exercise-3-part-3-responsive-css\/","title":{"rendered":"Exercise 3, Part 3: Responsive CSS and Google Fonts"},"content":{"rendered":"\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/ubwp.buffalo.edu\/art320\/exercises\/exercise-3-building-a-site-with-html-and-css\/exercise-3-part1-html\/\" data-type=\"page\" data-id=\"342\">Part 1: HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/ubwp.buffalo.edu\/art320\/exercises\/exercise-3-building-a-site-with-html-and-css\/ex02-part-2-css\/\">Part 2: CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/ubwp.buffalo.edu\/art320\/exercises\/exercise-3-building-a-site-with-html-and-css\/exercise-3-part-3-responsive-css\/\" data-type=\"page\" data-id=\"386\">Part 3: Responsive CSS<\/a><\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">Responsive CSS<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">A Non-Responsive Website Example<\/h2>\n\n\n\n<p><a href=\"https:\/\/dequeuniversity.com\/library\/responsive\/1-non-responsive\" target=\"_blank\" rel=\"noreferrer noopener\">Non-responsive <\/a>example<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Responsive Website Examples<\/h2>\n\n\n\n<p>Examine each site below. Start with your browser window opened as wide as possible. Slowly narrow the window and note carefully how each element on the page changes, and at which points major changes occur.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.bostonglobe.com\/\" rel=\"nofollow\">The Boston Globe<\/a> \u2014 an early adopter and one of the best examples<\/li>\n\n\n\n<li><a href=\"https:\/\/www.yale.edu\/\" target=\"_blank\" rel=\"noreferrer noopener\">Yale.edu<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Responsive Web Design (RWD) Overview<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Fluid Container Widths<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>To achieve fluidity in the necessary elements, especially&nbsp;<code>&lt;div&gt;<\/code>&nbsp;widths,&nbsp;pixel dimensions in the CSS must be changed to percentages.<\/li>\n\n\n\n<li>Every fixed-width block element (<strong>target<\/strong>) can be expressed as a proportion of its parent element (<strong>context<\/strong>) as a <strong>percentage<\/strong>. For example, a 250px wide container inside of a 500px container can be expressed as 50%.<br>Convert pixel measurements to percentages using the formula:<br><strong>target (px) \u00f7 context (px) = result (%)<\/strong><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Responsive Font Sizing<\/h3>\n\n\n\n<ol id=\"block-25d6a583-c8b1-4ccf-b65d-5a9b7ccbc2a7\" class=\"wp-block-list\">\n<li>An <code>em<\/code> is a unit of measurement relative to a text element&#8217;s parent&#8217;s font-size. <br><br>If you set a rule for <code>html { font-size: 16px } <\/code>then by default all text will be 1 em = 16px. <br><br>Children of html with a <code>font-size: 1em<\/code> will display at 16px. <br><br>If the target size of your <code>&lt;p&gt;<\/code> text, for example, is 11px, divide 11px by the <code>font-size<\/code> of html: 11 \u00f7 16 = 0.6875em.<\/li>\n\n\n\n<li>Note that em values are relative to a parent&#8217;s font-size, which may also be percentages of their parent&#8217;s font-size. Changing the top-most value will cause all other dependencies to be changed as well. Avoid this by using <code>rem<\/code> (Root em) units, which are proportions of the value set in <code>html<\/code>.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Media Queries<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Using your browser&#8217;s code inspector and looking at the &lt;<code>body&gt;<\/code> tag specifically, you can test a design to determine at what screen widths the design breaks. You may see elements become hidden offscreen or cut off.&nbsp;<em>Media Queries<\/em>&nbsp;are used to change the CSS at those&nbsp;<em>breakpoints<\/em>.<\/li>\n\n\n\n<li>&nbsp;A browser knows what size it is open to at any given time.&nbsp;A media query says \u201cwhen the browser reaches&nbsp;width <em>n<\/em>, apply style <em>x<\/em>.\u201d In other words, when a browser shrinks to a determined breakpoint, new styles kick in for elements defined in the media query.&nbsp;The new styles often change floats, widths, and relative font sizes.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Converting a Fixed Width Page to a Fluid, Responsive Page<\/h2>\n\n\n\n<p>Observe that the CSS we\u2019ve written so far for Exercise 3 above results in a fixed-width page that becomes cut off as the browser window narrows. To accommodate different sized browser windows, mobile devices, and assistive technologies such as screen-readers, fixed-widths must be converted to percentages, and media queries will be used to alter the design at specified breakpoints.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Instructions<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Change the <code>#wrappe<\/code>r width from 960px to 90% and observe how the design now resizes as the browser narrows. (Note that the sections contained within were already set as percentages, so they are now able to resize based on their parent&#8217;s width.) Set a <code>max-width: 960px;<\/code><\/li>\n\n\n\n<li>Most font-sizes in the exercise\u2019s CSS have been expressed as ems. The <code>nav li<\/code> rule uses a size of 13px. Experiment by changing to something close to 1em.<\/li>\n\n\n\n<li>Determine the breakpoints at which the design fails by monitoring window size. If you are using Safari, go to Developer&gt;Enter Responsive Design Mode and look at the width value at the top. If you are using Chrome, open the Inspector and as you resize your browser the width will appear in the upper right.<\/li>\n\n\n\n<li>Create a media query to alter the design at that point. At 580px, the <code>&lt;aside&gt;<\/code>&nbsp;element should flow beneath the <code>&lt;main&gt;<\/code> element, and the &lt;nav&gt; elements should float left and stack vertically. Add the below code to your CSS.<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code><code>\/* Media Queries *\/<\/code>\n<code>@media screen and (max-width: 580px) {<\/code>\n<code>:root {\n--body-color: #27e627;\n}<\/code>\n<code><span style=\"font-family: inherit;font-size: inherit;text-align: initial;letter-spacing: 0px\">#wrapper {<\/span>width: 100%;\n}<\/code>\n<code>header nav, main, aside {\nfloat: none;\nmargin: 20px auto;\nwidth: 90%;\nheight: auto;\n}<\/code>\n<code>main img {\nwidth: 100%;\nheight: auto;\nfloat: none;\n}<\/code>\n<code>header {\nbackground-color: inherit;\n}<\/code>\n<code>header nav li {\nbackground: #000;\ndisplay: block;\nmargin-bottom: 3px;\n}<\/code>\n<code>header nav li a {\ndisplay: block;\npadding: 10px;\ntext-align: center;\n}<\/code>\n<code>#banner {\ndisplay: none;\n}<\/code>\n<code>footer {\nposition: sticky;\nwidth: 100%;\n}\n}<\/code><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Google Fonts<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Visit <a href=\"https:\/\/fonts.google.com\/\">fonts.google.com<\/a> and choose the font family and styles you wish to incorporate into your pages. Be mindful of choosing&nbsp; few families and only the styles that you will need, since each will increase page load time.<\/li>\n\n\n\n<li>Select the family to reveal the code you will need to embed within your HTML and CSS. You may choose to &#8220;Customize&#8221; your selection to include only the styles you intend to use.<\/li>\n\n\n\n<li>The <code>&lt;link&gt;<\/code> code must be added to your HTML <code>&lt;head&gt;<\/code> section.<\/li>\n\n\n\n<li>The <code>font-family<\/code> code should be added to any CSS rule in which you want to control the font, for example, your &lt;p&gt;, &lt;a&gt;, &lt;h1&gt;, etc. tags.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Code Generators<\/h2>\n\n\n\n<p>Optional: Use Code Generators to easily create CSS effects like styled buttons, rounded corners and background-color gradients. The generated code can be added directly to your CSS<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/cssgradient.io\/\">cssgradient.io<\/a>&nbsp;\u2014 gradient generator<\/li>\n\n\n\n<li><a href=\"http:\/\/www.colorzilla.com\/gradient-editor\/\">colorzilla<\/a>&nbsp;\u2013 advanced gradient generator<\/li>\n\n\n\n<li><a href=\"https:\/\/html-css-js.com\/css\/generator\/text-shadow\/\">html-js-css<\/a>&nbsp;\u2013&nbsp;<a href=\"https:\/\/html-css-js.com\/css\/generator\/text-shadow\/\">text shadow generator<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/border-radius.com\">border-radius.com<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/9elements.github.io\/fancy-border-radius\/\">Fancy border radii<\/a>&nbsp;(organic shapes)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Submit<\/h2>\n\n\n\n<p>Submit your complete <a href=\"https:\/\/buffalo.box.com\/s\/7suoobjhc6wdu8y1660mjgv3wu3grk8k\">Exercise 03 Submit<\/a> folder on Box.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Responsive CSS A Non-Responsive Website Example Non-responsive example Responsive Website Examples Examine each site below. Start with your browser window opened as wide as possible. Slowly narrow the window and [&hellip;]<\/p>\n","protected":false},"author":295,"featured_media":0,"parent":358,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"class_list":["post-386","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages\/386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/users\/295"}],"replies":[{"embeddable":true,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/comments?post=386"}],"version-history":[{"count":37,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages\/386\/revisions"}],"predecessor-version":[{"id":4424,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages\/386\/revisions\/4424"}],"up":[{"embeddable":true,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages\/358"}],"wp:attachment":[{"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/media?parent=386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}