Welcome to WebmasterWorld Guest from 54.162.139.105

Forum Moderators: not2easy

Message Too Old, No Replies

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

Image was floated on desktop

     
5:04 pm on Apr 2, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 4, 2002
posts: 1830
votes: 3


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>
6:21 pm on Apr 2, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5007
votes: 21


Instead of targeting a div wrapper with class nameimg, what happens if you target "img" elements instead?
5:40 pm on Apr 3, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 4, 2002
posts: 1830
votes: 3


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?
5:53 pm on Apr 3, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5007
votes: 21


What if you set it to float: none for small displays?
7:32 pm on Apr 3, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 4, 2002
posts: 1830
votes: 3


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.
7:36 pm on Apr 3, 2015 (gmt 0)

Full Member

joined:Dec 11, 2013
posts:229
votes: 38


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>
7:56 pm on Apr 3, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5007
votes: 21



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.
2:36 pm on Apr 4, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:942
votes: 27


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%; }
3:42 pm on Apr 6, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 4, 2002
posts: 1830
votes: 3


@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.