Placing An Image Next To A Block (UL) Without Changing Block Behavior

But with max-width:460px what about all the screens that are not 460 px?

Do you mean what about all the screens that are wider than 460px or
do you mean what about all the screens that are narrower than 460px?

Wider

My 4 inch margin problem doesn’t need to be answered because evem if it were solved the image never reaches all the way left.

What 4 inch margin problem??? I don’t think I’ve read about that.

Have you incorporated the change that I posted… and tested it?

I did. It looks as though it will work on all screens, it works on my 17". So what is the purpose of the 460px on the wrapper?

I would think by now the authors of CSS updates have created a show all borders property. Did they?

The 4" white space problem I wrote about in #15. It’s obsolete because the image never shifted left.

The .wrapper does not have a width assigned. The (max-width:460px) in the media query represents the “breakpoint” at which the styles in the media query are invoked… viewport widths of 460px and narrower.

Sorry, I don’t know what you are talking about.

OK. Are you satisfied that the image shifts to the left now?

What distance is 460 pixels?

I would think by now the authors of CSS updates have created a show all borders property. Did they? You know that “box model” and all. What if I want to see all borders of everthibg. Do I really have to find each box ind put in border:1px red, etc for each?

I assume you are asking for the distance in a measuable unit other than pixels… inches or centimenters, maybe. The answer is that it depends on the pixel density of the screen and any scaling factor that the video card or operating system may be applying. In other words, there is no absolute answer.

Yes. Although it is usually better to use outlines than borders because adding a border where there normally is none changes the dimensions of the layout slightly unless box-sizing:border-box is applied.

What is the property? Outline width, style, offset?

What distance is 460 pixels? - From a to b, not units or resolution.

screen and (max-width:460px)

Is that the max width of the UL? I’m not sure that could be because

ab cde ghi jkl mno pqrst abcde fghu ghgjk

fits all on ne line.

Same as border. width, style, color.

The width of the viewport.

outline:50px solid green?

How can I write those CSS people to tell tham to create an outline everything property?

outline:yes.

Yes.

I don’t know. I don’t think it would be practical, though. I use outlines a lot while developing and troubleshooting pages. Usually I want only certaiin items boxed and usually with different colors depending on their layer or function. Too many outlines would clutter most screens beyond recognition.

You’ve been a great help Ron, Paul too.

Thanks so much,

Chris.

1 Like

Oh, please. if browsers had as a default

* {
outline: 1px solid #f00;
}

your post would look like

Too much of a good thing?

1 Like

I think it’s great. It looks hideous but who cares, you take it out when you’re done.

My image is actually 500 px wide (not 250, sorry). Wouldn’t I use a different viewport width ? I was looking at this page showing a list of viewports http://viewportsizes.com/?filter=

Not sure which to choose - the closest to 920? (460/250=1.84 X 500 =920… or 460 X2 920)

No, No, No, No!

Don’t get into trying to cater for every view size via device, there are far too many.
Just make the page as fluid as possible and add a break point only when and where needed.
That way you cater for every possible screen size.

2 Likes