Podcast

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

1
2

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

Here’s the media query used for this site.

1
2
3
4
5
6
7
@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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 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