how to prevent text on side of image on mobile that was floated RWD

Image was floated on desktop

[Lorel]

I've had a problem I can only solve in one way by setting up a different div class for each image on the website so I hope there is an easier solution.

I use the responsive method of designing for mobiile.

I often use floated images alongside of paragraphs. However on mobile devices they usually have text along the side or are not centered. I've tried multiple solutions I've seen on the net but nothing seems to have worked unless you set up a div class for each image, which is not a good idea when the site is image intensive and images are all different sizes.

Can anyone advise me on how to set this up so it applies to all images on the site?

Here is the method I'm currently using that works when applying a class to each image.

--------CSS:

nameimg {
float:left;
width:170px;
margin-right:12px; }

---------MEDIA QUERY: Max 320:

.nameimg { float:none; display:block; margin:0 auto; }


-------HTML:

<div class="nameimg">
<img src="images/name.jpg" alt="">
</div>

[Fotiman]

Instead of targeting a div wrapper with class nameimg, what happens if you target "img" elements instead?

[Lorel]

I had earlier targeted the image element so tried it again. That works on 2 pages where only an image is included, but not on one page where I have a caption added.

<div><img src="images/nameimg.jpg" alt="" class="imgfloatlpadr"><br><div class="center smallfont">citation text goes here.</div>
</div>

The caption floats totally outside of the div
Is there a way to fix this?

[Fotiman]

What if you set it to float: none for small displays?

[Lorel]

It is already set to float:none, etc. for min320 media query:

.imgfloatrpadl {display:block; float:none; margin:0 auto; padding:0; }
.imgfloatlpadr {display:block; float:none; margin:0 auto; padding:0; }

Thanks for trying to help.

[Selen]

Maybe:

<div><img src="images/nameimg.jpg" alt="" class="imgfloatlpadr"><br><div class="center smallfont">citation text goes here.</div>
<div style="clear:both"></div>
</div>

[Fotiman]

It is already set to float:none, etc. for min320 media query:

.imgfloatrpadl {display:block; float:none; margin:0 auto; padding:0; }
.imgfloatlpadr {display:block; float:none; margin:0 auto; padding:0; }

In the code you posted above, those classes are applied to the image, not the caption. If the caption is floating "outside of the div", I assume that means you've got styles for the caption that are setting it to float.

[rainborick]

In similar situations, I find it easiest to use something closer to your original code:

<div class="nameimg">
<img src="images/name.jpg" alt="">
</div>

Initial CSS:

nameimg {
float:left;
width:170px;
margin-right:12px; } 

and for (max-width:320px) CSS:

.nameimg { float:none; margin:0; width:auto; text-align:center; }

This just centers the image in a full-width block, but it does impose additional scrolling for the user.

For floated images that are normally only about half the width of a 320px display anyway, you might get a better result if you just slightly reduced the width of the image to about 1/3 of the display with something like the following for 320px:

.nameimg { width:30%; }
.nameimg img { width:100%; }

[Lorel]

@fotiman - I had no class set up for caption.

@rainborick - the problem with the original code is that it requires a different width for different size images, also some float left and some right on desktop.

However I have reverted to the original code on this site as it has few images.

Next site I'm going to work on will be an image intensive site which will require some other method.

I'm surprised that the Web Standards team hasn't come up with a fix for this problem.

Thanks to those that tried to help.