Scale Images & Floats for Mobile

HTML & CSS
1

Hi - I discovered a problem with images. I can’t go through every page and reduce the image sizes AND change the html (floats) to fit into mobile.

Do you know how I can scale all the images AND .txtpic to be mobile-friendly?

http://greensmoothie.com/test/1mst.php

My images are either centered like this:

<p class="cnt"><img src... /></p>

Or they display side-by-side with text (or with another image) like this:

<div class="txtpic w100 clearfix">
<div class="flft cnt w30"><img src="... />
<p class="cap lft w80 hcnt">image caption</p>
</div>
<div class="frgt lft w65">
<p>text</p>
</div>
</div>

css:

.cnt {text-align:center}
.txtpic {margin:15px auto 20px; padding:0}
.w100 {width:100%}
.flft {float:left}
.w30 {width:30%}
.cap {font:0.75em/1.5 "Lucida Sans Unicode",Verdana,sans-serif} /*img caption*/
.cap img {margin:3px 0}
.frgt {float:right}
.lft {text-align:left}

I thought we originally a few years back floated the images like that so that if it didn’t fit, the right-hand float would drop to the next line?

My goal is just to change the header & footer areas of every page, to fit mobile – NOT to go into each individual page and make months-long changes there!

thank you! - Val

Making Images Responsive?
2

Hi Val. You could try putting a max-width and height:auto on your images.

1 Like
3

Hi yes that makes sense - 2 different @media’s for tablets & phones. But what of .txtpic? The two floats side by side. How do I get one float to drop down?

4

That’s it, you are sizing the image containers, but not the img element inside the container.

These don’t need to be in queries.

For that you may want to use a query and set float: none;

5

but they don’t have a container in the html? And I can’t add one unless I were to change images in more than 100 files. An image is either in a paragraph or in a side-by-side float.

I’ll try the set float:none. Thank you!

6 
<div class="flft cnt w30">

That is your container.

<p class="cnt">

That is another, although a <p> is not the best choice for an image.
You have css targeting those (they have classes applied) but none targeting the the images to make thier size responsive, so the images stay at the pixel values stated in the html img tag. You need some css to override that size when the container get smaller.

.containerclass img {
    max-width: 100%;
    height: auto;
}

Where I put “containerclass” that could be any suitable class you have on those containers, such as .lft or w30.

7

Thank you! I first tried this:

p,.flft,.frgt img{max-width:100%;height:auto;}
@media screen and (max-width: 964px)
    {.flft,.frgt{float:none;}}

But that’s a horrible mess! So I tried just this (without @media):

p,.flft,.frgt img{max-width:100%;height:auto;}

It works for flft & frgt if there’s an image in one float and text in the other.

It doesn’t work if there’s images in both floats.

It doesn’t work if it’s a p. (and I can’t search+replace <p> globally with a more suitable container because sometimes it has more than “cnt” in the class.)

See (I added another example with 2 images side-by-side):

http://greensmoothie.com/test/1mst.php

Is there anything I can do with the wordpress images? About 10% of the site is in wordpress. Their html looks like this:

[caption id="attachment_223" align="alignright" width="323"]<img class="wp-image-223" alt="SFS Drug" src="http://greensmoothie.com/wp-content/uploads/SFSdrug.jpg" width="323" height="240" /> SFS Drug - thank you to David Icke for this image[/caption]

If this image problem is unfixable, then I’ll just have to leave the viewport out of the header.

At least I will have Paul’s menu that fingers can touch (without viewport) if they expand it with two fingers and horizontally scroll across it. The current menu on the site is untouchable, the links are too close together, and it can’t be expanded & scrolled across because there’s multiple columns in each dropdown.

many thanks for your help - Val

8

Hi - I decided if I must put all images into two different container types that are responsive, then I will :smile:

The two containers needed are for (1) an image centered in a <p> and (2) an image floating side-by-side with text, or side-by-side with another image. I’m guessing for (2), we need to switch .txtpic to a table with 2 cells?

We’ve gone to so much trouble to make the site responsive, I’m not gonna let those images defeat me.

Does anyone have any suggestions for the two containers needed? Is Paul O’B still here? I hope he hasn’t passed on? Life is so fragile.

thank you! - Val

9

I had the brainwave to try the wordpress method (although the page isn’t in wordpress).

css:

img.alignright.alignright,div.alignright{float:right;display:inline;margin:0 0 10px 20px;}
img.alignleft,.alignleft,div.alignleft{float:left;display:inline;margin:0 20px 10px 0;}
img.aligncenter,.aligncenter,div.aligncenter{display:block;margin:0 auto 10px;}
img.alignright.alignright,div.alignright,img.alignleft,.alignleft,div.alignleft,img.aligncenter,.aligncenter,div.aligncenter{max-width:99%;height:auto;}

html:

<img class="alignright" src="
<p>this text will flow next to and below the image</p>

It works! Text wraps around images, and images scale down in iphone.

I like this method because with the floats I had, or with a table, you have to define the amount of text that floats, or is in a table cell, next to the image. The wordpress method just wraps it perfectly.

My final remaining problem is, how do I get a caption to float under the image?

Please see: http://greensmoothie.com/test/1mst.php

thanks! - Val

10

Hi - looking at the div solution on this page:

https://www.cs.tut.fi/~jkorpela/www/captions.html

I tried this - see http://greensmoothie.com/test/1mst.php - captions display correctly under images on laptop BUT the images don’t scale down on iphone (and <div class="aligncenter"> doesn’t work, the image displays on the left, not center).

<div class="alignright"><img src="*.jpg" width="365"... />
<div class="cap cnt" style="max-width:365px;">caption</div></div>
<p>...
<div><img class="aligncenter" src="*.jpg" width="399"... />
<div class="aligncenter cap cnt" style="max-width:399px;">caption</div></div>
<p>...

<div class="alignleft"><img src="*.jpg" alt="" width="365"... />
<div class="cap cnt" style="max-width:365px;">caption</div></div>
<div class="alignright"><img src="*.jpg" alt="" width="330"... />
<div class="cap lft" style="max-width:330px;">caption</div></div>
<p class="clear">

So I tried this - see http://greensmoothie.com/test/1mst2.php - where the images scale down on iphone BUT the captions don’t always display below the image on laptop.

<div><img class="alignright" src="... />
<div class="alignright cap cnt" style="max-width:365px;">caption</div></div>
<p>...
<div><img class="aligncenter" src="... />
<div class="aligncenter cap cnt" style="max-width:399px;">caption</div></div>
<p>...

<div><img class="alignleft" src="... />
<div class="alignleft cap cnt" style="max-width:365px;">caption</div></div>
<div><img class="alignright" src="... />
<div class="alignright cap lft" style="max-width:330px;">caption</div></div>
<p class="clear">

css:

img.alignright.alignright,div.alignright{float:right;display:inline;margin:0 0 10px 20px;}
img.alignleft,.alignleft,div.alignleft{float:left;display:inline;margin:0 20px 10px 0;}
img.aligncenter,.aligncenter,div.aligncenter{display:block;margin:0 auto 10px;}
img.alignright.alignright,div.alignright,img.alignleft,.alignleft,div.alignleft,img.aligncenter,.aligncenter,div.aligncenter{max-width:99%;height:auto;}

Please does anyone know what I can do next? thank you! - Val

11

What is all that nonsense :slight_smile:

Al you need do is float left or right as required you don’t need all those classes as they are meant to catch all eventualities.

Assuming you are wrapping a div around the img then just use.

.alignright{float:right;margin:0 0 10px 20px;}
.alignleft{float:left;margin:0 20px 10px 0;}

Then you need to do what you fail to keep doing time and time again :wink: is to address the image itself and size it to fit the container.

e.g. ADD this:

.alignright img,
.alignleft img{
max-width:100%;
height:auto;
}

Now the image will be its intrinsic with and height until such time as it no longer fits and then it will scale smaller (this method may not work in IE8 depending on structure as ie8 prefers width:100% on the image).

1 Like
12

phew so relieved you’re still alive! Last time I was here a few years ago the wordpress expert died unexpectedly…

Please can you give sample captions under each image?

It took me from 3.30 a.m. this morning to just before noon (nearly 8 hours) producing all that nonsense. Which I s’pose is a step up from being drunk in the gutters of London.

13

Actually I DID have your alignright & left, I just forgot the comma in:

img.alignright.alignright...

all that nonsense is wordpress! Because 10% of site is in wp. But anyway, putting the comma in, the captions still don’t work. New css:

img.alignright,.alignright,div.alignright{float:right;display:inline;margin:0 0 10px 20px;}
img.alignleft,.alignleft,div.alignleft{float:left;display:inline;margin:0 20px 10px 0;}
img.aligncenter,.aligncenter,div.aligncenter{display:block;margin:0 auto 10px;}
img.alignright,.alignright,div.alignright,img.alignleft,.alignleft,div.alignleft,img.aligncenter,.aligncenter,div.aligncenter{max-width:99%;height:auto;}

See it not working at:
http://greensmoothie.com/test/1mst.php
http://greensmoothie.com/test/1mst2.php

thanks! - Val

14

I gave you the code to fix it in my first example but you chose not to apply it :).

.alignright img,
.alignleft img{
max-width:100%;
height:auto;
}

The other bit of code I gave you was to replace all your wordpress nonsense :wink:

None of your wordpress code addresses the image itself unless you were going to apply those classes to the image which you can’t do because you want a caption contained within the floated block.

16

Thank you! The left and right floats are working perfectly now with captions and scaling. But I can’t get aligncenter to work with caption and scale.

Please can you give me the css & html when it’s just one image in the center of the page, with caption?

This is how it’s working with left & right floats:

<div class="alignleft"><img src="spr-big-elli.jpg" alt="" width="365" height="161" />
<div class="cap cnt" style="max-width:365px;">this is very long rambling text to see what happens to the caption under this image</div></div>
<div class="alignright"><img src="spr-big-elli.jpg" alt="" width="330" height="161" />
<div class="cap lft" style="max-width:330px;">this is very long rambling text to see what happens to the caption under this image</div></div>
17

The code I gave you in my first post was working on your test site and all you needed to do was add it.It still works if I add it live.

The centred image is already resizing ok and its still the other images that are holding the page open.

Update the demo page so I can see what code you are currently using as you still don’t seem to have added any of the code I gave you. It’s a bit like a moving target at the moment :slight_smile:

18

Uploaded here:

http://greensmoothie.com/test/1mst.php

.alignright{float:right;margin:0 0 10px 20px;}
.alignleft{float:left;margin:0 20px 10px 0;}
.aligncenter{display:block;margin:0 auto 10px;}
.alignright img,.alignleft img,.aligncenter img{max-width:100%;height:auto;}
19

You still don’t have the code I gave you in the page.:smile:

I don’t know how many more posts I can keep making saying the same thing lol.

.alignright img,
.alignleft img,
.aligncenter img{
max-width:100%;
height:auto;
}
20

Paul, I DO have it. I just went to the page and looked at css to doublecheck. Do a search for aligncenter and you will see it there.

.alignright{float:right;margin:0 0 10px 20px;}

.alignleft{float:left;margin:0 20px 10px 0;}

.aligncenter{display:block;margin:0 auto 10px;}

.alignright img,.alignleft img,.aligncenter img{max-width:100%;height:auto;}
21

Weird I’m not seeing it in Chrome. Let me clear cache and have another look.