Divs, mobile platform viewing, and sizing! (HTML, CSS, JavaScript)

So today I learn about how to make webpages look less horrible on mobile devices. Personally I hate hate hate mobile sites, because usually they change more than the way images scale and stuff.. they make an entirely new layout and it fucks everything up. But anyway, let us begin.

Apparently when making a website for that good-for-nothing whore Esha, I wasn't really understanding what I was doing when making div elements to hold photos and such of Esha's dishes. Specifically, the difference between making those photos the size of "cover" instead of "100%" or a specific pixel size.

We predefined the div height to 200px, and a div takes its width from the width of its parent element (Thanks Ian!) which, in this case, is max-width: 600px. Works out pretty perfectly for our photos... almost too perfectly...

Here's where stuff can get tricky. The body has a MAX width of 600, which is fine for the photos when the page is displayed in a bigger window. HOWEVER, on a mobile platform you probably don't have that 600px width unless you browse in landscape and the length is weird and shit. If these images were set to 100%, they would be resizing themselves to fit inside the div.

If the div goes down to 400px width, then in order for the picture to display 100%, the height of the picture must be scaled down to roughly 133px. If you remember, we made the height of the div 200px. That won't change. By default, there won't just be black-space for the other 66px of height.. it will be a repeat of the picture, like so:

For this reason, Cover is better because it just cuts the image off a bit and doesn't let it repeat. Looks slightly better.

HOORAY STORM OF SCREENSHOT'D PICTURES!

So, we'll use media queries (if, then statements) to fix this mess. But not after I watch American Horror Story with my bestie who is on her way over. EVAN PETERS IS A HOTTIE AMIRITE? I'd cover him, that's for sure.