html – How to correctly layout a layout when the screen width is less than the layout width in pixels?


Layout width is 1920px. Monitor width is 1600px. Question: how to properly type up such a layout and observe all sizes and indents?


1 – Check with the customer that he is aware that the designer made such a wide layout. Be warned that without adaptation, it will only look good on large monitors. Sometimes customers can overlook the width in the designer's layout, not pay attention.

2 – You can use in devtools in chrome toggle device toolbar ctrl + shift + m . There, in the reponsive mode, you can manually set the screen width to be larger than the monitor, and the zoom will automatically be selected. Even a perfect pixel will work, but it will be quite small.

3 – You can set initially for body in styles a fixed minimum width equal to 1920px. A horizontal scroll will appear, and you will type pixel by pixel, it is not very convenient to scroll, of course, but it will not be small, as in the previous version.

Moreover, please note that the reverse zoom will not show you the real picture, and the layout result may differ from real large screens.

Reverse zoom is when you press ctrl + - in chrome for example, i.e. 90%, 75%, etc.

Scroll to Top