{"id":959,"date":"2013-11-14T21:33:52","date_gmt":"2013-11-14T21:33:52","guid":{"rendered":"http:\/\/sites.la.utexas.edu\/kb\/?p=959"},"modified":"2020-06-15T18:58:56","modified_gmt":"2020-06-15T18:58:56","slug":"fixing-responsive-design","status":"publish","type":"post","link":"http:\/\/sites.la.utexas.edu\/kb\/2013\/11\/14\/fixing-responsive-design\/","title":{"rendered":"Fixing Responsive Design"},"content":{"rendered":"<h2><strong>Add CSS @ Genesis -&gt; \u00a0Simple Custom CSS<br \/>\n<\/strong><\/h2>\n<p><strong>I recommend using Firefox, downloading the <a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/web-developer\/\">\u201cWeb Developer\u201d Add-On<\/a> to see responsive sizes quickly and all at once.<\/strong> (After installing and going to your page, Right click -&gt; Web Developer -&gt;\u00a0 Resize -&gt; View Responsive Layouts). Of course, you\u2019ll probably want to check in other browsers as well.\u00a0<a href=\"http:\/\/public.la.utexas.edu\/basecamp\/147019\/wplabs\/Screen%20Shot%202013-11-13%20at%203.49.05%20PM.png\">Click for a picture guide of the menu (Login to Basecamp).<\/a><\/p>\n<p><strong>Quick check:<\/strong><\/p>\n<ul>\n<li>correct header title horizontal &amp; vertical alignment? (for all sizes)<\/li>\n<li>correct header description\/tagline alignment? (for &gt; ~580 px)<\/li>\n<li>header background not randomly cut off? (resizes on its own)<\/li>\n<li>navigation links don&#8217;t wrap to next line? (all sizes)<\/li>\n<\/ul>\n<p><span style=\"color: #000000\"><strong>Default settings (COLOR-CODED!!!):<br \/>\n<\/strong><\/span><\/p>\n<ul>\n<li><strong><span style=\"color: #99cc00\">Title\/description are vertically at or near the top for all views<\/span><\/strong><\/li>\n<li><strong><span style=\"color: #339966\">Left-aligned title and description\/tagline in largest view <\/span><\/strong><\/li>\n<li><strong><span style=\"color: #33cccc\">Right-aligned title\/description in all smaller views*<\/span><\/strong><\/li>\n<li><strong><span style=\"color: #3366ff\">Title\/Description resizes in all smaller views relative to window width*<\/span><\/strong><\/li>\n<li><strong><span style=\"color: #999999\">Description\/Tagline disappears when &lt; ~580px*<\/span><\/strong><\/li>\n<li><strong><span style=\"color: #800080\">Header background is 960 x 136 px, but resizes in all smaller views relative to window width<\/span><\/strong><\/li>\n<\/ul>\n<p>*These defaults have not been changed by anyone yet, so there is no example code.<\/p>\n<p><strong>Fixing Navigation Link Issue<\/strong><\/p>\n<p>Correct: &#8220;Lab&amp;nbsp;Members&#8221;<\/p>\n<p>Incorrect: &#8220;Lab Members&#8221;<\/p>\n<p>If you don&#8217;t use non-breaking spaces, the links will sometimes wrap to the next line, and cause one link to look like two separate links.<\/p>\n<p><strong><span style=\"color: #99cc00\">YOU WANT TO VERTICALLY CENTER ALIGN THE TITLE AT ALL VIEWS<br \/>\n<\/span><\/strong>Copy-paste the code below into Genesis -&gt; Simple Hooks -&gt; genesis_after_footer Hook (near bottom of page)<\/p>\n<blockquote><p>&lt;script\u00a0 type=\u201dtext\/javascript\u201d&gt;<br \/>\n\/\/ This code is found in the genesis_after_footer hook in GenesisSimpleHooks plugin<br \/>\nfunction fixTitleHeight() {<br \/>\njQuery(\u2018#title\u2019).css(\u2018margin-top\u2019, (jQuery(\u2018#header\u2019).outerHeight()-jQuery(\u2018#title-area a\u2019).height())\/2);<br \/>\n}<br \/>\njQuery(window).on(\u2018resize\u2019, function() {<br \/>\nfixTitleHeight()<br \/>\n});<br \/>\njQuery(document).ready(function(){<br \/>\nfixTitleHeight();<br \/>\n});<br \/>\n&lt;\/script&gt;<\/p><\/blockquote>\n<p><strong><span style=\"color: #800080\"><span style=\"color: #339966\">YOU WANT TO RIGHT ALIGN THE TITLE AT THE LARGEST VIEW<\/span><\/span><span style=\"color: #800080\"><br \/>\nYOU HAVE A TALL HEADER BACKGROUND<\/span><\/strong><br \/>\nApologies. The code below has lots of extras that do more than just right-align the title and allow the header to be taller than the default. It&#8217;s code from Smits, and it&#8217;ll do what you want. (It might also do what you don&#8217;t want.)<\/p>\n<blockquote><p>\u00a0\u00a0\u00a0 .wrap { position: relative; }<\/p>\n<p>@media only screen and (max-width: 960px) {<br \/>\n.header-full-width #title-area { \/*THIS RIGHT-ALIGNS; CHANGE MAX-WIDTH, WIDTH*\/<br \/>\nmax-width: 670px;<br \/>\nwidth: 80%;<br \/>\nfloat: right;<br \/>\nposition: relative;<br \/>\n}<\/p>\n<p>.header-full-width #title { \/*CHANGE MAX-WIDTH*\/<br \/>\nmax-width: 670px;<br \/>\nwidth: 100%;<br \/>\nline-height: 1.2;<br \/>\ntop: 50%;<br \/>\n}<br \/>\n}<\/p>\n<p>@media only screen and (max-width: 540px){<br \/>\n.header-full-width #title-area { \/*THIS RIGHT ALIGNS; CHANGE MAX-WIDTH, WIDTH*\/<br \/>\nmax-width: 590px;<br \/>\nwidth: 90%;<br \/>\nfloat: right;<br \/>\n}<\/p>\n<p>.header-full-width #title { \/*THIS RIGHT ALIGNS; CHANGE MAX-WIDTH*\/<br \/>\nmax-width: 590px;<br \/>\nwidth: 100%;<br \/>\nfloat: right;<br \/>\n}<\/p>\n<p>#home-left .widget-wrap p{<br \/>\ntext-align:center;<br \/>\n}<\/p>\n<p>#sidebar .widget-wrap p{<br \/>\ntext-align:center;<br \/>\n}<br \/>\n}<\/p>\n<p>@media only screen and (max-width: 360px) {<br \/>\n.header-full-width #title {<br \/>\nfont-size: 14px;<br \/>\nfont-size: 3.8vw;<br \/>\nmax-width: 80%;<br \/>\n}<br \/>\n#home-left .widget-wrap p{<br \/>\ntext-align:center;<br \/>\n}<br \/>\n#sidebar .widget-wrap p{<br \/>\ntext-align:center;<br \/>\n}<br \/>\n}<\/p>\n<p>\/*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;*\/<\/p>\n<p>#header { \/*THIS IS ONLY IF YOU HAVE A TALL HEADER*\/<br \/>\nheight:200px;<br \/>\nbackground:url(http:\/\/labs.la.utexas.edu\/smits\/files\/2013\/10\/BannerAbstract.png) no-repeat;<br \/>\nbackground-size:100%;<br \/>\nbackground-position:left top;<br \/>\nmargin-top:0px;<br \/>\n}<\/p>\n<p>#title-area {<br \/>\npadding: 0;<br \/>\n}<\/p>\n<p>#title{<br \/>\nmax-width:660px;<br \/>\nfont-weight: normal;<br \/>\nposition:relative;<br \/>\ntext-align:right;<br \/>\n}<\/p>\n<p>#footer .creds{\/*REMOVES FOOTER GENESIS JUNK*\/<br \/>\ndisplay:none;<br \/>\n}<\/p>\n<p>\/*EVERYTHING PAST THIS IS PROBABLY NOT NECESSARY BUT MAYBE IT IS. MAYBE.*\/<\/p>\n<p>\/*&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;*\/<br \/>\nh2.entry-title{ visibility:hidden; }<br \/>\n#site_graphic{ margin: 0px; }<br \/>\n#home-left .widget{ border-bottom: 1px; }<br \/>\n#home-left .widget-wrap{ padding:20px 0px; }<br \/>\n#sidebar .widget-wrap { padding:20px 0px; }<br \/>\n#home-right-content {<br \/>\nmargin:0;<br \/>\ndisplay:inline;<br \/>\n}<br \/>\nh2.entry-title{ display:none; }<br \/>\n#footer .gototop{ display:none; }<\/p><\/blockquote>\n<p><strong>YOU WANT AN EXTENDED FOOTER<br \/>\n<\/strong>Here&#8217;s the code from Church-Lang:<\/p>\n<blockquote><p>\u00a0\u00a0\u00a0 @media only screen and (max-width: 580px) {<br \/>\nbody #wrap #header {<br \/>\nbackground-size: 200% !important;<br \/>\nbackground-position: left top;<br \/>\npadding-bottom: 30%; \/*change accordingly*\/<br \/>\n}<\/p>\n<p>#headerExtended {<br \/>\nwidth: 100%;<br \/>\npadding-bottom: 30%; \/*change accordingly*\/<br \/>\nbackground: url(url-of-banner-here) no-repeat right top;<br \/>\nbackground-size: 200%;<br \/>\nmargin-top: -10%; \/*change accordingly*\/<br \/>\n}<\/p>\n<p>#home-middle {<br \/>\nborder-bottom: none;<br \/>\npadding-bottom: none;<br \/>\n}<br \/>\n}<\/p><\/blockquote>\n<p><strong>YOU WANT TO CHANGE THINGS NOT COVERED HERE<\/strong><\/p>\n<blockquote><p>\/*<br \/>\n* This is code from the default theme<br \/>\n*<br \/>\n* Choosing the right CSS selector is important<br \/>\n* i.e. if you edit something and nothing changes, try using a more specific selector<br \/>\n*<br \/>\n* If you do not edit a rule or property, delete it.<br \/>\n* If you want to change font sizes, be sure to change both the px and vw versions.<br \/>\n* Most of the changes that are necessary are probably with the #header, #title-area, #title, or #description<br \/>\n*<br \/>\n* If you have questions, ask K, Leroy, Ryan, or Stacy.<br \/>\n*\/<\/p>\n<p>@media only screen and (max-width: 960px) {<\/p>\n<p>#wrap #header {<br \/>\nbackground-size: contain !important;<br \/>\nwidth: 100%;<br \/>\nmin-height: 0;<br \/>\nheight: 0;<br \/>\nmargin: 0;<br \/>\npadding-bottom: 16%;<br \/>\nwidth: 100%;<br \/>\n}<\/p>\n<p>.header-full-width #title-area {<br \/>\npadding: 0px;<br \/>\ntext-align: right;<br \/>\nwidth: 100%;<br \/>\n}<\/p>\n<p>#title {<br \/>\nfloat: right;<br \/>\nwidth: 100%;<br \/>\nmargin: 0px;<br \/>\nfont-size: 20px; \/* backup *\/<br \/>\nfont-size: 3.8vw;<br \/>\n}<\/p>\n<p>.header-full-width #title a {<br \/>\nwidth: 100%;<br \/>\n}<br \/>\n}<\/p>\n<p>@media only screen and (max-width: 580px) {<\/p>\n<p>p#description {<br \/>\nposition: relative;<br \/>\ntop: -9999px;<br \/>\nright: -9999px;<br \/>\ntext-indent: -9999px;<br \/>\n}<\/p>\n<p>#header {<br \/>\nwidth: 100%;<br \/>\nfont-size: 20px;<br \/>\nline-height: 20px;<br \/>\nborder: none;<br \/>\n}<\/p>\n<p>#title {<br \/>\nfont-size: 16px; \/* backup*\/<br \/>\n\/*line-height: 16px;*\/<br \/>\nwidth: 100%;<br \/>\nmargin-right: 0;<br \/>\nmargin-top: 12px;<br \/>\nfont-size: 3.4vw;<br \/>\n}<br \/>\n}<\/p>\n<p>}<br \/>\n@media only screen and (max-width: 360px) {<\/p>\n<p>.header-full-width #title {<br \/>\nfont-size: 14px; \/* backup *\/<br \/>\n\/*line-height: 18px;*\/<br \/>\nwidth: 100%;<br \/>\n\/*margin-right: 0;<br \/>\nmargin-top: 12px;*\/<br \/>\nfont-size: 5vw;<br \/>\nline-height: 90%;<br \/>\n}<\/p>\n<p>.header-full-width #title-area {<br \/>\nwidth:60%;<br \/>\nfloat: right;<br \/>\n}<br \/>\n}<\/p><\/blockquote>\n<p>Note that &#8220;title-area&#8221; is a container for &#8220;title&#8221; and &#8220;description&#8221; (not shown). &#8220;title&#8221; also contains &#8220;a.&#8221;<\/p>\n<p><a href=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2013\/11\/div.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-965\" src=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2013\/11\/div-1024x853.png\" alt=\"div\" width=\"640\" height=\"533\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2013\/11\/div-1024x853.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2013\/11\/div-300x250.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2013\/11\/div.png 1500w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Add CSS @ Genesis -&gt; \u00a0Simple Custom CSS I recommend using Firefox, downloading the \u201cWeb Developer\u201d Add-On to see responsive sizes quickly and all at once. (After installing and going to your page, Right click -&gt; Web Developer -&gt;\u00a0 Resize &hellip; <a href=\"http:\/\/sites.la.utexas.edu\/kb\/2013\/11\/14\/fixing-responsive-design\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":445,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[200714],"tags":[],"class_list":["post-959","post","type-post","status-publish","format-standard","hentry","category-coding"],"_links":{"self":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/959","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/users\/445"}],"replies":[{"embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/comments?post=959"}],"version-history":[{"count":13,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/959\/revisions"}],"predecessor-version":[{"id":3377,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/959\/revisions\/3377"}],"wp:attachment":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/media?parent=959"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/categories?post=959"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/tags?post=959"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}