Responsive Site Not Working: CSS - html

Question

I have a website that I'm working on, and I'm trying to make it into a responsive website, so that if the page is accessed via a mobile device, everything is positioned in one column. Right now, only two of my elements are responsive. (The 200x150 images in my fiddle)
All other images overlap each other in the center of the page. I'm trying to make it so that the two images on the right panel (251x281 and 261x360) align in one column after the (200x150) image, in other words, so that those two images on the right are the last two elements of the page. This is my media query:
#media screen and (max-width: 768px){
.events .events-plugin{
max-width: 100%;
display:block;
width: auto;
height: auto;
}
.img-wrap{
width: 100%;
}
.container .slideshow{
top: 5%;
}
}
And my fiddle:
http://jsfiddle.net/UQdYX/
What am I doing wrong here? Any help would be appreciated. Thanks in advance.

Answer 1

I tried moving the code to my IDE and work it out there. But it's difficult without having an actual responsive framework behind it to test it with #media (min size - max size) etc..But I'll give you pointers on the obvious mistakes. Use floats and margins to control positioning.
refrain from using too much positioning, specially position:absolute. It's counter productive to the principle of responsiveness.
Watch your div nesting. It looks like your page architecture is off. Stick to the basics
<header><nav><section><aside><footer>, etc.
And then finally make a lot of use of your framework's pre-built sizes. Bootstrap will use <span1><span2> <span3>...<span12>...and bluprint will use grid1, grid2, gri3...grid12 etc. Each of these prebuilt sizes will allow you to align your divs to sum 1200px in width.
e.g.
<div class"span12">
<div class="span6></div>
<div class="span6></div>
</div>

Answer 2

Okay, yes, I think your HTML needs a bit of reworking. I understand the dilemma, though - when you're new to dynamic layouts it can seem a bit of a struggle at first.
I would suggest that one reasonable possibility would be something like this (this is just a simple solution which you can hopefully expand/refine for your purposes);
<div class="wrap">
<div class="left_column">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="right_column">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
CSS;
div.left_column,
div.right_column {
float: left;
width: 50%; }
#media (max-width: 640px) {
div.left_column,
div.right_column {
float: none;
width: 100%; }
}
This should display as a two-column layout until the browser window measures less than 640 pixels wide, at which point, it changes to one column.
Obviously, you would add further DIVs inside the left and right columns as you required them. Let me know if you want a more specific/detailed example.