Do I Really Look This Awful on Wide Screen?

HTML & CSS
1

Oh dear, someone just sent me a widescreen image of my web page. Do I really look this awful?

http://goo.gl/oRXYKC

I thought my

#wrapper{width:97%;max-width:1200px;margin:0 auto;}

would keep the lines legible. But those lines are so long I don’t think my eye could read that far along a line.

Here’s what I look like on my own 19" screen, which is the only way I ever see it:

1009×682 57.9 KB

Is someone perhaps able to post here a wide-screen image of the top of my site, where logo & subscribe box is?

Maybe I should reduce the 1200px? Will 900px be too narrow?

I’ve been so focused on mobile, I didn’t ever picture such a wide-screen rendering!

thank you! - Val

2

Please post a link to your site. We need to see the code.

Thank you.

EDIT: never mind. Silly me. I finally thought to look in your profile.

3

Have you tried using CTRL minus and CTRL plus to change the screen font size?

4

Val,

If it were me, I would put a wrapper (.outer) around the content of your page and give that wrapper a max-width of 1200px or so. You could also use ems.

Since your page is practically finished, you could omit adding the wrapper (.outer) and add the max-width to the <body> tag instead.

<html>
<body>
<div class="outer">
...
...
</div>
<script>...</script>
</body>
</html>
5

Since there is already a max-width on the wrapper, just reducing it should be fine. About 900px looks about right to me.

I have taken to using em for thinks like max-width and media queries, as it copes better with font-only zooming.

2 Likes
6

Val’s #wrapper does not parent the contents of the page, only the upper part. It is at the same level as the rest of the outer containers.

<div id="wrapper"></div>
<div id="navwrap"></div>
<div id="leaftop"></div>
<div id="content" role="main"></div>
<div id="leafup"></div>
<div id="leafbtm"></div>
<div class="btmad"></div>
<footer id="footer" role="contentinfo"></footer>

(Thus my recommendation.)

1 Like
7

Yes I would also just add max-width:1200px to the body and the problem should be solved.

1 Like
8

I wasn’t looking at the actual site. I assumed #wrapper was what actually is #content in that structure.

1 Like
9

Val, if there is a lesson here, it is that it is easier (and less prone to error) to assign the max-width to one outermost element than it is to assign that same max-width to several almost-outer elements.

1 Like
10

What browser do you use for dev?
If you use the dev tools in Chrome, you can show a zoomed out display of a larger screen. This allows you to see how the layout appears on a screen larger than the one you have, albeit shrunk down.

11

Val, you are not presenting your 19" screen, you are presenting your 12" browser window

What does your site look like if you drag your browser window to the full width of your 19" monitor screen? (or maybe you really don’t have a 19" monitor and are just being humerous. Zing, over my head.)

12

Hi - thanks million for everyone’s feedback.

Val’s #wrapper does not parent the contents of the page, only the upper part

Yes you’re right there. My web host tech support who accidentally in pursuit of another problem sent me that wide-screen image, then sent me this of the header alone. As you can see, it’s contained exactly the way I mistakenly thought my entire page was.

http://goo.gl/dO78Fi

and here again is how the rest of the page looks on widescreen:

http://goo.gl/oRXYKC

So all this time my wrapper has been addressing only the head part and nothing else!

Yes I would also just add max-width:1200px to the body and the problem should be solved.

Thank you Paul & Ron. Please can you confirm that this:

body{line-height:1;font-size:100%;margin:2% auto;background:#e5ffbf;}
#wrapper{width:97%;max-width:1200px;margin:0 auto;}
    @media screen and (max-width:330px){#wrapper{width:auto;}}

must be changed to this:

body{max-width:1200px;line-height:1;font-size:100%;margin:2% auto;background:#e5ffbf;}
#wrapper{width:97%;margin:0 auto;}
    @media screen and (max-width:330px){#wrapper{width:auto;}}

I have taken to using em for things like max-width and media queries, as it copes better with font-only zooming.

Should I rather use em and if so, what is 1200px in em?

it is easier (and less prone to error) to assign the max-width to one outermost element than it is to assign that same max-width to several almost-outer elements

Should I now delete max 1200px wherever it appears in the css? Since I now plan to place it on body?

If you use the dev tools in Chrome, you can show a zoomed out display of a larger screen

I DO use Chrome. I click on that screen icon and it just shows mobiles. How do I get widescreen?

Here’s an image of the icon I click on in chrome, it’s second from right:

drag your browser window to the full width of your 19" monitor screen

I do have 19" monitor, and that image I showed you is the full width of my screen. I can’t drag the window any wider. I’ve got the 19" monitor plugged into a laptop. The laptop has black space on the left & right of the window but no way for me to drag it wider.

I’m so grateful I caught this, and for your help in solving it. I had no idea my page was displaying so crazily different from how I’m seeing it – making the lines far too long on wide screen, for comfortable reading.

thank you! Val - http://greensmoothie.com

13

Here I’m viewing your site at a size much larger than my laptop monitor, at 50% size.

1269×566 81.2 KB

Here I added max-width: 1200px to the body in dev tools, it appears to have the desired effect of limiting the content width.

1252×703 83.9 KB

Leaving it in doesn’t seem to hurt anything, but you can remove it to slim the css a little if you want.

It’s up to you. I don’t always use em, it depends on the container or contents that the width/query relates to. For text based things like menus or body text I will use em, for pixel based things like images and graphics I use px.
The best thing is to experiment with different setting in dev tools to see what works and what does not, without committing to code.
Firefox has text only zoom which you can experiment with to see how it affects your layout. With normal zoom em Vs px doesn’t make that much difference.

You can work it out roughly by saying 1em = 16px, but you may use a bit of trial and error to get the size you want. The exact size may not be that critical in many cases.

15

Yes, that’s the gist of it :smile:

I’ll give that a tentative “yes”. Delete any {max-width:1200px;} or {width:1200px;} CSS statements found on any containers within the <body> element. The <body> element will take over the job of setting the width of the page.

Let me recommend that you use 1200px initially, then talk with @SamA74 about using ems. If the text is zoomed larger, then the width of the page will become wider than 1200px if you use ems instead of 1200px. That may be a good thing, or it may not. You should try it and see what you think.

Regarding the 19" monitor…

What operating system does your laptop use?

If windows, drag you mouse into the 19" monitor screen and right-click over the monitor’s background image.

You should see a context menu. If you don’t, then try to find the Control Panel and look for the Monitor’s settings. One of the choices may be “properties” or it may be about your video card. Either way, it will allow you to see how your monitor and possibly the video card is configured. I believe that you should be able to configure the monitor and card so your laptop recognizes the full size of the 19" monitor. You may not be able to configure both the 19" monitor screen and the laptop’s screen with simultaneously compatible settings, but then again, you might! You’ll have to give it a try. If you are unsure what to do, let us know. I can fire up a Win7 or Win10 machine.

(Ninja’d by SamA74 !! :smile:)

17

Hi Sam - thanks million for your image! Very helpful. I can’t get it to work for me.

  • I clicked F12
  • then clicked that Responsive at the top (where it’s 2420 x 270, 50% in your image)
  • then defined a custom device - 27 inch screen @ w=2560, H=1440, and left it blank for “device pixel ratio”
  • and I got the image below, it’s not showing how max-width 1200px is targeting only header, as it does in your first image. It should look like your 1st image. What did I do wrong?

506×384 14.8 KB

Thank you Ron for your feedback! So I’ll stick with 1200px (rather than em) because I think at some point in the misty past Paul told me 1200-1250 is the standard. I’ll delete all the other 1200px’s because of body’s power.

You may not be able to configure both the 19" monitor screen and the laptop’s screen with simultaneously compatible settings

It’s too complicated for me! Esp. as I also use the laptop without the monitor so I’m guessing would have to keep on changing things. I’m happy with the way the monitor displays…

…so long as I can get that Responsive thing to work in Chrome! Do I need to enter something into Pixel ratio?

P.S. I haven’t moved the 1200px yet. It’s still in wrapper. I first want to see how awful I look on my screen.

thank you! - Val

18

Hi, Val.

If you will tell me the brand and exact model of your laptop, I’ll try to find a downloadable copy of the user’s manual. Hopefully, it will describe the capabilities of the video card in your laptop. With that information, one should be able to determine if two monitors can have different aspect ratios. I feel sure that the pixel density of the card will be the same for both monitors so the more closely matched the pixel densities of the monitors are the more equally sized the images will be, but I would hope that the screens can be different aspect ratios. If they can, then you may not need to change settings adding or removing the external monitor. Maybe… it depends on the video card.

19

Hi Ron - thanks million for your kind offer. But you know what I just discovered? That 1200px in wrapper is only not recognized by the wordpress (“WP”) pages. Most of my site is NOT in WP, it’s in “.php” files. The .php files all obey 1200 in wrapper.

Both WP and non-WP use the same css.

By coincidence, the page that my web host tech support displayed to me - where I first saw the error - and my home page that Sam was displaying - both happened to be in WP.

But the page I was looking at on localhost (sitemap.php) is not WP. So that’s why I couldn’t see the error! Soon as I realized this morning to look at Sam’s page, the home page, in F12, then I saw it for the first time!

So with 1200px in wrapper, this is how wordpress pages display:

1024×461 30.7 KB

and this is how non-wordpress display:

1023×435 25.1 KB

With 1200px in body, they all display the same.

That big green space each side left and right looks weird in widescreen, but at 27 inch I see it’s 110 characters or 22-25 words in a line, which is plenty enough!

So all’s well that ends well :slight_smile: thank you all for taking the time to help me here. Thank you Sam for showing me how to test widescreen in chrome!

all the best, Val

2 Likes
20

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.