Screen Resolution and HTML

HTML & CSS
1

My computers screen resolution is 1600 X 900.

My header and footer are set to a maximum width of 1600px, but the remaining body of the page is set to a maximum width of 1400 px, but that is not obeyed by the screen.

however when I open that in chrome responsive mode (inspect): I think control+shift+I than when I put the width to 1600 px than it works correctly. so what is the issue and what is the fix?

I have done a screencast for better understanding.
https://s3.amazonaws.com/sitepoint007/_my_screen_resolution.gif

2

Did you validate the web page?

https://validator.w3.org

http://jigsaw.w3.org/css-validator/

1 Like
3

Yes, I do, but normally I handle these issues of validations and responsiveness at the end of the project.
I sit for one whole day, and write the responsive code and then check the validations.

But I think the issue that I have here is related to the ports/screen width etc.

I forget to mention that the live page is here.

4

I have a feeling the problem is conflating “resolution” with “viewport”.

When you inspect and set width, does a horizontal scrollbar appear?

If you’re coding for resolution, even with the browser maximized the viewport will be less becuase of its browser chrome (toolbar, statusbar, etc.)

1 Like
5

Hi,
My screen res is also 1600 x 900, your page renders as expected when my zoom is set at 100%.

I see in your Chrome inspect mode that you were at 97%

It looks like when not in “inspect” you may have had your zoom above 100%.

Most of the time I use FF and my zoom level is always indicated on the right side of my address bar if I am above 100%.

Double check and make sure you are at 100% when viewing in normal mode

3 Likes
6

I prefer to validate while developing because errors and warnings seem easier to fix immediately.

I checked the link and it has numerous errors and warnings which each browser will no doubt guess at what is trying to be achieved, Try fixing the errors and warnings and see if the problems are solved.

Invariably I create validation links on the web page to make it easier to incrementally check progress.

3 Likes
7

You are spot on. My zoom in the browser is set to 110%; As soon as I fixed it and set it to 100%. that 1400px/1600px issue was resolved. Indeed a new learning for me.

@Mittineague the horizontal bar doesnt appears.

2 Likes
8

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