This is not the most complex RWD layout problem in the world by a long way.
I’m sure many here could solve it very easily.
But we need to know your exact intentions for the layout, how you would like it to behave on the big and small (and possibly intermediate) screens.
Maybe create a couple of simple sketches of the layouts you want.
Then you would scale the image smaller at less than 500px by ensuring that the image had a max-width:100% and height:auto settings in the css.
Forget about viewports as Sam said and just concentrate on your design and make changes where your design needs it and not some imaginary viewport width as there lies madness:)
Why are 250px wide images ok but 500 wide images have to be scaled?
If you are using a phone with a screen 320px wide, 500px won’t fit on it.
But my interest is moving the image left once the text has dropped down, Small screens do thier own scaling.
That’s not how it works, if any element is bigger than the screen in either dimension, it creates a scroll bar. Having two scroll bars is bad. So all elements need to be allowed to scale down with the screen and be contained within the width.
That’s easily done with a media query to switch the float value.
Are you saying there’s no screen smaller than 250px
No, I’m saying there are screens smaller than 500px.
Though I’m not aware of any modern phones smaller than 320.
The small version of the iWatch is 272px wide.
I don’t know of anything smaller.
But I typically cater for 320 or 300, I don’t think anyone does any serious browsing on anything smaller.
So the 250px image I was using as an example worked well for most if not all small screens. Still I have a 500px image and the code that Paul and Ron wrote won’t work on a more normal size of 500px image.
<!DOCTYPE html>
<html>
<head>
<style>
.fr {
float:right;
margin:0 0 20px 10px;
}
.wrapper {
overflow:hidden
}
@media screen and (max-width:460px) {
.fr {
float:none;
display:block;
margin:0 10px 10px 26px;
}
}
* {outline: 1px solid #f00}
</style>
</head>
<body>
<div class="wrapper"> <img class="fr" src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Beach_%28Salines%29.jpg" width="500" height="334">
<ul>
<li>
<h1>abbbbbccc cde ghi jkl mno </h1>
</li>
<li>
<h1>kl mnopqr stuv</h1>
</li>
<li>
<h1>xyza bc de fghi kln</h1>
</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>
</body>
</html>
When the space for the text (the UL ) is too small for the first word abbbbbccc to fit it forces all the text to jump down below the level of the bottom of the image - at which point the image should jump left to fill the white space where the text was but now doesn’t move at all, but an increase in image size for some reason stops the image from shifting left.
The picture shifts to the left at the width specified in the media query. I you want that to happen at a different with, change the value in the media query.
That’s because the bigger image pushes the text below sooner, before the media query kicks in and moves the picture.
“width specified in the media query.” The width of what?
As was said before…
This is a media query:-
@media screen and (max-width:460px) {
}
The first bit @media says we are asking about media.
screen says the type of media we are asking about is the screen.
(max-width:460px) specifies that we are asking about a screen that is no larger than 460px in width.
And therefore the css that appears within the following brackets { } will apply only to screens that are no larger than 460.
tl;dr
The Screen!
I see how I caused some trouble when I arbitrarily wrote in a 250px width dimension. And then I wrote viewport when I meant media query.
I have no interest in programmg for samll screens because the so many of my images are larger than small screens and so all those small screens will always have nothing but image (reduced in size image at that) at the top of the screen with no words on the left at all.
So for my larger images on larger screens, I still need the same thing, the text to flow down the left side of the image to below the image and the image to jump left into the white space where the text was. Is it possible?
Thanks,
Chris
so what are you expecting the huge (and growing) number of people with small screens to do? Is everyone supposed to just ignore your site - if so then why bother with it in the first place.
4 Likes
Did you even look at my Codepen in post 51?
That works down to a screen width of about 220px, when the longest word in your list runs out of space.
1 Like
Hi,
You seem to be making this sound more complicated than it is:)
Take a look at this live simple example of a floated image and resize the browser window (or test on any device) and then explain what it is that you need to be different?
http://www.pmob.co.uk/temp2/float-wrap.html
The image is floated to the side and assuming the image is a 500px image then your media query will need to be anything slightly larger than that 500px so that you can then apply a different styling and remove the float.
I made the media query at 660px which means that you don’t get ‘orphaned’ bits of text at the left side of the image when the text is squashed and some words fit and some don’t. It means the image will not be floated when there is only 160px space left for text to fit alongside the image (approx). That 660px can be anything you like that is greater than the 500px image but obviously you don’t want it to be too large or then the text won’t wrap on intermediate screens.
There is no natural way to float an image to the right and then suddenly align left when there is no text next to it. If you think logically about this action then it could never be a default option as it would break the idea of floating in the first place.
If you didn’t want wrapping text (as in my example) but text that just stayed to the left of the image you could create the effect with flexbox but that is a completely different construct to a simple floated image.
2 Likes
That web page looks great for my need.
It looks like the width dimension in a media query is the width of something like a viewfinder" - how many pixels in width are you giving the visitor device to re fit your web page. The shifting left of a floated right image is the device refitting the page a second time which occurs when the browser width is close to the width given in the media query. That’s just a guess.
In any event, that code should be enough for my need, let me see.
Thanks Paul
You can use view page source for that’
@media screen and (max-width:660px){
img.fr{
float:none;
margin:0 0 15px;
}
}
The media query overwrites the previous float: right when the screen is less than 660px.
1 Like