Responsive div - text wrapping div. Can this be stacked when minimized?

Question

I have set up a global element to align images to the right:

.containerright {
    float: right; margin: 5px 5px 5px 10px; position:relative;
}

It works perfectly until the screen is minimized to mobile portrait size. Then the text wrap leaves a few words behind.

For example:

<div class="containerright"><img src="/images/imageexample.jpg" width="223" height="160" hspace="0" vspace="5" alt="imageexample" border="0"></div>

<h2>Here is an example of heading text!</h2>

When minimised 'Here is an example...' is aligned to the top-left of the image and the rest of the sentence '...of heading text!' falls under the image so there is a huge break where the image is sitting to its right.

How can I set the class so that when it's viewed '@media (max-width: 320px)' it stacks eg. display:block; ???

Thanks for the help!

Answer 1

Just remove the float in the media query CSS. :)

@media (max-width: 320px) {
.containerright {
    float: right; /* remove the float on the mobile media query */
    margin: 5px 5px 5px 10px; 
    position:relative;
}
}

jsFiddle example here.. resize the screen to see what it would look like on a mobile < 320px.

Alternatively, you could just override it in the media query..

@media (max-width: 320px) {
.containerright {
    float:none;
}
}

Answer 2

@media (max-width: 320px) {
  .containerright {
    width: 100%;
  }
}