Why does page container expand in web browsers?

Ken · 2015-11-11 22:55:25

When setting up my website, I went with the default page container settings: “fixed” width of 1140-pixels. I assumed that when my website is viewed at 100% on a 1920 x 1080 computer display, it would occupy approx 59% of the display width (1140/1920=.59375). In reality it occupies approximately 85% of the display width. I didn't think much about this until I updated my website to include the Galleria Slideshow on my home page and now the greater width of the website means that the slideshow and text underneath it are cropped so that only a portion of the slideshow photo is visible. I have checked this on Chrome, Firefox and Microsoft Edge, and the results are the same.

Is there any setting that will actually force my website to occupy 1140 pixels wide of the 1920 width of the display?

You can check my website at www.sweetlightgallery.com

Thanks for any suggestions.

rod barbee · 2015-11-11 23:14:20

my site is set to 1140px as well, and yours looks to be the same width as mine.

If you use your browser's inspector, you'll see that the width is 1140px

Ken · 2015-11-12 03:54:55

yes ... but ... I created two Photoshop files, one is 1140 pixels wide and the other is 1632 pixels wide (85% of the 1920 pixel width of the computer display). When viewed at 100% the 1140 pixel wide file is about 59% of the width of my 1140 pixel wide page container of my website, which is also viewed at 100%. The 1632 pixel wide file, when viewed at 100%, is approximately the same width as my 1140 pixel wide page container of my website. My conclusion is that even though the page container is set to 1140 pixels wide, the page container expands in the web browser to approximately 1632 pixels wide.

Is there something wrong with my logic? or something I do not understand about how the web browser is rendering my website?

Thanks for your thoughts and help.

rod barbee · 2015-11-12 03:59:05

On my Windows machine, if I hold down the CTRL key and move the scroll window I can zoom in or out in a browser window. Maybe you're zoomed?

Either way, the css shows that the page width is 1140px

Ken · 2015-11-12 04:37:05

All three browsers that I have used for testing are set at 100%. The css shows page width is 1140 px, but it is not displayed at 1140 px, it is displayed at approximately 1632 pixels, as my Photoshop test demonstrates. So there is something else going on with how the browser renders the size of the web pages.

rod barbee · 2015-11-12 05:00:52

My monitor is 16" wide and the resolution is 1600 pixels wide. (100 ppi)

If I create an image in Photoshop 1140px wide at 100 ppi, the image I create is the same with as the page content on my website, which is set at 1140px. (the rulers in Photoshop are set to 1" increments)

Ken · 2015-11-12 05:53:54

OK ... I figured it out ... I discovered that my Windows 10 display settings "change the size of text, apps, and other items" was set to 150%. For some reason on the 42 inch HDTV and on a 13" notebook computer, both with 1920 x 1080 displays, the Windows 10 display settings recommends 150%, which makes everything else very readable. But is also makes web pages 150% larger.

The interesting thing is that my NEC PA271 display that I use for my photography work is 2560 x 1440, but under the Windows 10 display settings it recommends 100%. I keep it set at 125% because it has a fine pixel pitch (109 ppi) and at 100% it is difficult to read text. On this display my website looks the way I would expect it to. However I was evaluating the website size on the 42 inch and 13 inch HDTV resolution displays, since I thought these would be the more typical displays that viewers would see my website on.

I feel happy that I understand the reason my website looked so large, but also embarrassed because I should have thought to check the Windows 10 display settings.

Thanks for your help and patience.

Community @ The Turning Gate

#1 2015-11-11 22:55:25

Why does page container expand in web browsers?

#2 2015-11-11 23:14:20

Re: Why does page container expand in web browsers?

#3 2015-11-12 03:54:55

Re: Why does page container expand in web browsers?

#4 2015-11-12 03:59:05

Re: Why does page container expand in web browsers?

#5 2015-11-12 04:37:05

Re: Why does page container expand in web browsers?

#6 2015-11-12 05:00:52

Re: Why does page container expand in web browsers?

#7 2015-11-12 05:53:54

Re: Why does page container expand in web browsers?

Board footer