container/image positioning in responsive design

Question

I'm trying to fix an info-container to properly get under an image when they are loaded in mobile screen size.

Here is the image style:

.coach_photo img {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
display: block;
margin-bottom: 15px;
width: 140px;
height: 140px;
}

And this is info-container style:

.coach_info {
margin-left: 180px;
}

In desktop format, the image is on the left side and the info-container (containing text and some small images) on the right side of the image. as seen 180px to the right of image.

What is supposed to happen is to have the info container to go under the image when the screen width becomes smaller than a specific size.

What happens instead is while I reduce the width of browser to observe the transformation, the info container stays in the same position ( right side of the image) and gets thiner and thiner there but never move to the left to automatically gets placed under the image.

If I change margin left 180px to 0, it is perfectly placed in the proper position under the image but clearly the desktop edition goes corrupt. any idea?

Answer 1

Basically you reach a breakpoint which is smaller or equal to 800px and than the styles inside the @media rule will be applied. display block will make it go under the image.

// DESKTOP STYLES HERE

@media all and (max-width: 800px) {
 .coach_info {
    margin-left: 0;
    display: block;
  }   
}

http://fiddle.jshell.net/p8wZ2/7/show/