I should know how to set this by now, but I've tried a few things and just can't get the result I'm looking for.

My monitor recently bit the dust and I was forced to buy a new one. I purchased a 23.8" HP monitor and discovered that my website only displays in the middle of the screen. It seems to look ok on other devices, but on the larger/wider screens it seems quite small and bunched up.

How can I get my pages to use 100% of the wider monitor screens? (www.usafleetsupply.com)

In your style.css line 24 you have the following

.container {
max-width: 1380px;
}

If you change that to 100% it goes full width

.container {
max-width: 100%;
}

Personally, I would avoid that and leave a little space. Maybe try 95%

David

Thanks for the help David! I had been tampering with the "@media screen and (max-width: 1024px)" lines as I thought the issue might have been in there. (not-so-much)

I like to the quick & painless resolutions

You're welcome.

David

The advice above is valid, but I'm not so sure that it's a good idea. You would do better to contain the content at a pixel width where it still looks good, or build a media query/queries that will present a different layout for much bigger viewports. If you wind up with a bunch of white space either side you can always fill it with color or a light tiled pattern so it doesn't look so stark.

Contradicting myself here I will say that people who use large displays tend to tile it with a few small windows, rather going full screen with a single browser window, but if they do here's what your site now looks like on an Apple Studio Display 27", for example

https://app.screencast.com/yN1DOi1cJT4KA

Retarded, right? Modern browsers make it easy to test different viewports for mobile usability, but that works for bigger displays too so you can figure out where the layout starts to fall apart and set your max pixel width a bit before that.

tl;dr - define your container with a pixel width so you can control the edge cases, not a percentage of an unknown resolution.

Peter


Professional ecommerce web hosting services
Shared hosting Windows & Linux | Dedicated servers | Domains | SSL
Ecommerce Templates specialists since 2003
https://servelink.com

Thanks for the info Peter.

The Screencast example looks huge. I couldn't imagine people wanting to use a monitor a 27" monitor (or anything larger than 23.8" really), or it seems they would be running into this issue quite often. But then again I am "old-school", I actually wouldn't mind going back to my old 18" monitor.

Since I really wouldn't know the best way to go about building a media query/queries that will present a different layout for much bigger viewports, I will try a few different max-width's and see if I can find a good place to land.

Thanks!

yea yea yea... I had a long response, but decided to keep it to myself, with one exception.
Peter, you should stop calling things that you don't think look good, retarded.
I suppose you, your friends, nor your customers have any children with down syndrome or the like.

David