Difference between revisions of "Template:WashU StLouis"

Line 28: Line 28:
 
});
 
});
  
// when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu
+
$("#display_menu_control").click(function(){
+
$('#menu_content').fadeToggle(400);
+
});
+
  
 
// call the current page highlight function
 
// call the current page highlight function
Line 408: Line 405:
 
/***************************************************** RESPONSIVE STYLING ****************************************************/
 
/***************************************************** RESPONSIVE STYLING ****************************************************/
  
/* IF THE SCREEN IS LESS THAN 1200PX */
+
@media only screen and (max-width: 1200px) {
+
 
+
#content {width:100%; }
+
.igem_2017_menu_wrapper {width:15%; right:0;}
+
.highlight {padding:10px 0px;}
+
.igem_2017_menu_wrapper #display_menu_control { display:none; }
+
#menu_content { display:block;}
+
.menu_button.direct_to_page {padding-left: 17px;}
+
+
}
+
 
+
/* IF THE SCREEN IS LESS THAN 800PX */
+
@media only screen and (max-width: 800px) {
+
 
+
.igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
+
.igem_2017_content_wrapper {width:100%; margin-left:0px;}
+
.column.half_size  {width:100%; }
+
.column.full_size img, .column.half_size img {  width: 100%; padding: 10px 0px;}
+
.highlight {padding:15px 5px;}
+
.igem_2017_menu_wrapper #display_menu_control { display:block; }
+
#menu_content { display:none;}
+
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; }
+
.menu_bottom_padding {display:none;}
+
.menu_button.direct_to_page { padding-left: 36px; }
+
}
+
  
  

Revision as of 23:55, 28 June 2017