Podcast #7 - Responsive Web Design

To get anywhere in responsive web design, you’ll need to set the viewport meta tag in the head of your web page.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Here’s the media query used for this site.

@media screen and (max-width: 480px) {
  footer.page section p { display: none; }
  .nav-search-form { clear: both; text-align: center; width: 100%; }
  .nav-previous, .nav-next { width: 50%; }
  footer.page section { padding: 2em 10px 0.5em 10px; }
  #content { padding-bottom: 250px; }
}

And the media queries for GeoPortal.

@media screen and (max-width: 800px) {
  #header-logo { display: none }
}

@media screen and (max-width: 640px) {
  /* General */
  .boxshadow { box-shadow: none; }

  /* Header */
  header { padding: 0; margin: 0; top: 304px; left: 1px; right: 15px;}

  /*  Search  */
  #searchdiv { max-width: inherit; width: 100%; min-width: 290px; padding: 0; text-align: center; float: none; background: white !important; border: none !important; box-shadow: none !important; border-radius: 0 !important;}
  #searchdiv label, #searchdiv span { display: none }
  #searchinput { width: 90% ; font-size: 22px;  margin: 0;  border-radius: 0 !important; }

  /* map area */
  #map-container { top: 5px; left: 1px; right: 15px; bottom: auto; height: 290px; min-width:  290px; }
  #toolbar { display: none !important; }
  #map { top: 2px; }

  /* sidebar */
  aside { top: 348px; left: 1px; right: 15px; bottom: inherit; height: auto; width: auto; overflow: auto; min-width: 290px; }
  #left-tabs { width: auto; margin-right: 0; margin-bottom: 5px; }
  .ui-accordion-header a { padding: 1.4em 1em 1.4em 2.2em !important }
  .ui-tabs .ui-tabs-nav li { padding: 1em 1.5em !important; }

  /* footer */
  footer { display: none; }

  /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */
  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}

Here’s some CSS for Wordpress to make the images in your posts responsive.

/* responsive images */
.entry-content img,
.comment-content img,
.widget img, div.wp-caption {
max-width: 97.5% !important; /* Fluid images for posts, comments, and widgets */
}
img[class*="align"],
img[class*="wp-image-"] {
height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
img.size-full {
max-width: 97.5%;
width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
}

Resources

Fuzzy Tolerance

Podcast #7 - Responsive Web Design

Comments