Fixing Responsive Design

Add CSS @ Genesis ->  Simple Custom CSS

I recommend using Firefox, downloading the “Web Developer” Add-On to see responsive sizes quickly and all at once. (After installing and going to your page, Right click -> Web Developer ->  Resize -> View Responsive Layouts). Of course, you’ll probably want to check in other browsers as well. Click for a picture guide of the menu (Login to Basecamp).

Quick check:

• correct header title horizontal & vertical alignment? (for all sizes)
• correct header description/tagline alignment? (for > ~580 px)
• header background not randomly cut off? (resizes on its own)
• navigation links don’t wrap to next line? (all sizes)

Default settings (COLOR-CODED!!!):

• Title/description are vertically at or near the top for all views
• Left-aligned title and description/tagline in largest view
• Right-aligned title/description in all smaller views*
• Title/Description resizes in all smaller views relative to window width*
• Description/Tagline disappears when < ~580px*
• Header background is 960 x 136 px, but resizes in all smaller views relative to window width

*These defaults have not been changed by anyone yet, so there is no example code.

Fixing Navigation Link Issue

Correct: “Lab&nbsp;Members”

Incorrect: “Lab Members”

If you don’t use non-breaking spaces, the links will sometimes wrap to the next line, and cause one link to look like two separate links.

YOU WANT TO VERTICALLY CENTER ALIGN THE TITLE AT ALL VIEWS
Copy-paste the code below into Genesis -> Simple Hooks -> genesis_after_footer Hook (near bottom of page)

<script  type=”text/javascript”>
// This code is found in the genesis_after_footer hook in GenesisSimpleHooks plugin
function fixTitleHeight() {
jQuery(‘#title’).css(‘margin-top’, (jQuery(‘#header’).outerHeight()-jQuery(‘#title-area a’).height())/2);
}
jQuery(window).on(‘resize’, function() {
fixTitleHeight()
});
jQuery(document).ready(function(){
fixTitleHeight();
});
</script>

YOU WANT TO RIGHT ALIGN THE TITLE AT THE LARGEST VIEW
YOU HAVE A TALL HEADER BACKGROUND
Apologies. 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’s code from Smits, and it’ll do what you want. (It might also do what you don’t want.)

    .wrap { position: relative; }

@media only screen and (max-width: 960px) {
.header-full-width #title-area { /*THIS RIGHT-ALIGNS; CHANGE MAX-WIDTH, WIDTH*/
max-width: 670px;
width: 80%;
float: right;
position: relative;
}

.header-full-width #title { /*CHANGE MAX-WIDTH*/
max-width: 670px;
width: 100%;
line-height: 1.2;
top: 50%;
}
}

@media only screen and (max-width: 540px){
.header-full-width #title-area { /*THIS RIGHT ALIGNS; CHANGE MAX-WIDTH, WIDTH*/
max-width: 590px;
width: 90%;
float: right;
}

.header-full-width #title { /*THIS RIGHT ALIGNS; CHANGE MAX-WIDTH*/
max-width: 590px;
width: 100%;
float: right;
}

#home-left .widget-wrap p{
text-align:center;
}

#sidebar .widget-wrap p{
text-align:center;
}
}

@media only screen and (max-width: 360px) {
.header-full-width #title {
font-size: 14px;
font-size: 3.8vw;
max-width: 80%;
}
#home-left .widget-wrap p{
text-align:center;
}
#sidebar .widget-wrap p{
text-align:center;
}
}

/*———————————————–*/

#header { /*THIS IS ONLY IF YOU HAVE A TALL HEADER*/
height:200px;
background:url(http://labs.la.utexas.edu/smits/files/2013/10/BannerAbstract.png) no-repeat;
background-size:100%;
background-position:left top;
margin-top:0px;
}

#title-area {
padding: 0;
}

#title{
max-width:660px;
font-weight: normal;
position:relative;
text-align:right;
}

#footer .creds{/*REMOVES FOOTER GENESIS JUNK*/
display:none;
}

/*EVERYTHING PAST THIS IS PROBABLY NOT NECESSARY BUT MAYBE IT IS. MAYBE.*/

/*———————————————–*/
h2.entry-title{ visibility:hidden; }
#site_graphic{ margin: 0px; }
#home-left .widget{ border-bottom: 1px; }
#home-left .widget-wrap{ padding:20px 0px; }
#sidebar .widget-wrap { padding:20px 0px; }
#home-right-content {
margin:0;
display:inline;
}
h2.entry-title{ display:none; }
#footer .gototop{ display:none; }

YOU WANT AN EXTENDED FOOTER
Here’s the code from Church-Lang:

    @media only screen and (max-width: 580px) {
body #wrap #header {
background-size: 200% !important;
background-position: left top;
padding-bottom: 30%; /*change accordingly*/
}

#headerExtended {
width: 100%;
padding-bottom: 30%; /*change accordingly*/
background: url(url-of-banner-here) no-repeat right top;
background-size: 200%;
margin-top: -10%; /*change accordingly*/
}

#home-middle {
border-bottom: none;
padding-bottom: none;
}
}

YOU WANT TO CHANGE THINGS NOT COVERED HERE

/*
* This is code from the default theme
*
* Choosing the right CSS selector is important
* i.e. if you edit something and nothing changes, try using a more specific selector
*
* If you do not edit a rule or property, delete it.
* If you want to change font sizes, be sure to change both the px and vw versions.
* Most of the changes that are necessary are probably with the #header, #title-area, #title, or #description
*
* If you have questions, ask K, Leroy, Ryan, or Stacy.
*/

@media only screen and (max-width: 960px) {

#wrap #header {
background-size: contain !important;
width: 100%;
min-height: 0;
height: 0;
margin: 0;
padding-bottom: 16%;
width: 100%;
}

.header-full-width #title-area {
padding: 0px;
text-align: right;
width: 100%;
}

#title {
float: right;
width: 100%;
margin: 0px;
font-size: 20px; /* backup */
font-size: 3.8vw;
}

.header-full-width #title a {
width: 100%;
}
}

@media only screen and (max-width: 580px) {

p#description {
position: relative;
top: -9999px;
right: -9999px;
text-indent: -9999px;
}

#header {
width: 100%;
font-size: 20px;
line-height: 20px;
border: none;
}

#title {
font-size: 16px; /* backup*/
/*line-height: 16px;*/
width: 100%;
margin-right: 0;
margin-top: 12px;
font-size: 3.4vw;
}
}

}
@media only screen and (max-width: 360px) {

.header-full-width #title {
font-size: 14px; /* backup */
/*line-height: 18px;*/
width: 100%;
/*margin-right: 0;
margin-top: 12px;*/
font-size: 5vw;
line-height: 90%;
}

.header-full-width #title-area {
width:60%;
float: right;
}
}

Note that “title-area” is a container for “title” and “description” (not shown). “title” also contains “a.”