@media walkthrough for @danafashina

danafashina.css

/* Without a @media query, the following makes every image set to "full size" in the editor show 1000px
across, centered with the margin-left command. "width: auto" overrides competing image size commands.

This command will affect every full-sized image on the site unless it's overriden by other @media queries. */

img.size-full {
	margin-left: -150px;
	max-width: 1000px;
	width: auto
}
/* The following @media queries override and change this first command.

This first @media targets only screens smaller than 960px across, usually phones and tablets. First, it
disables the "margin-left" above. That causes two issues: the image is too big and causes side-scrolling.
The width and overflow commands make sure that doesn't happen: the image shrinks to fill
it's parent div to 100%, and if something happened to cause it to spill over, it would hide the side scrolling. */

@media screen and (max-width: 960px) {
	img.size-full {
		margin-left: inherit;
		overflow: hidden;
		width: 100%
	}
}
/* The next two address an annoying issue I found. The original Melody theme doesn't have the extra-wide
images until the screen is at least 1400px wide. I wanted the images to become extra wide at smaller screen
sizes. When I applied the top code here to a screen at 960px wide, the image was not centered at all. So,
these two @media queries make the image a little smaller and centered for two "break points" (the term
for when a @media query should accomodate a different screen size, such as the screen real estate
between a cell phone in portrait mode or in landscape).

This first one only applies for screens between 960px up to 1029px  */

@media screen and (min-width: 960px) and (max-width: 1029px) {
	img.size-full {
		margin-left: -100px;
		max-width: 800px;
		width: auto
	}
}
/* This second applies to screens from 1030px up to 1099. After 1099, there are no more @media queries,
so the browser goes back and applies the "img.size-full" code at the very top of the page. */

@media screen and (min-width: 1030px) and (max-width: 1099px) {
	img.size-full {
		margin-left: -110px;
		max-width: 900px;
		width: auto
	}
}
/* Thus, by the time we get to the bottom of the @media queries, we've created code that started with how
to treat every image, then ovverrode how those look on every screen size until someone with a screen
wider than 1100px loads your blog */

#site-navigation {
	font-size: 20px;
}

.sub-menu a {
	font-size: 10px;
}

.wf-active .comment-list {
	font-size: 14px;
}

.wf-active .site-footer, .wf-active button, .wf-active input[type="button"], .wf-active input[type="reset"], .wf-active input[type="submit"], .wf-active input[type="search"], .wf-active .site-main #infinite-handle span, .wf-active .post-navigation .meta-nav {
	font-size: 1em;
}