How to layout sites that are wider than your screen?

Question

css

Hello everyone, I have such a question, there is a psd 1600px width that I need to layout, but unfortunately the width of the psd is larger than my screen, because of this, the layout becomes not convenient, since I layout based on the dimensions specified by the designer in Photoshop, because causing the padding(s) and margin(s) to display incorrectly on my device, although when viewed from a device >= 1600 px wide, it's still pretty good. Please tell me what to do, I have never made layouts from psd that are wider than my screen. Thank you.

Answer 1

The layout should be based on a width of 1000px. And if suddenly there is a layout in 1600px, then there should be a layout under 1000px. If not, then the designer is an idiot.
And to the question of how to typeset - media queries, as for any adaptive sites.

Answer 2

as I understand it, the author just wants to get an answer - typeset by scaling the browser)

Answer 3

1) www.adobe.com/ua/creativecloud/extract.html is a free service that allows you to get paddings, fonts, sizes with PSD not by eye 2) The adaptive layout mode in the browser allows you to set a resolution higher than that of the monitor and scales the PS
image itself
add resources to select aspect ratio
screensiz.es/phone
mydevice.io

Answer 4

Buy a monitor, preferably 2560 wide at once.
Because even though Sergey gave the right advice, it’s not very convenient to work like that.
About the layout.
If the task is to make an adaptive layout with a 1600px layout (especially if it has a full-width content part, and not ~1000px), ask for a lot of money and the condition that it will be the way you do it. And then if you are sure that you will take it out.
Join, use, suggest additions - requirements for psd layouts

Answer 5

If Perfect Pixel is not required, then for example in Google Chrome, you can enable Developer Tools, activate the Device Toolbar there and change Zoom to 75 or 50% so that the site begins to fit into the monitor screen.
With other browsers, I think the same.

Answer 6

Layout through bootstrap or a similar framework

Answer 7

A simple rule of thumb:
Start from the minimum width of the desktop layout.
It consists of the sum of the minimum widths of all columns, which in turn are equal to the maximum possible width of the element inside them.
Default Width for Desktop: 1024px

Answer 8

You can argue for a long time what the layout should be and whether it should be at all.
If your screen width is smaller than the layout width, then there are two ways:
1) Ask the customer/designer to make the layout at 1000-1300;
2) Work with scaling in the browser.
You can just hold down Ctrl and turn the wheel, or you can go to the developer tools and enter the desired resolution there.
If you are required to adapt / fluid layout, then it will be enough to see how everything works in 1600 a couple of times, and work the rest of the time in 1366.
If you use any framework, then everything is much simpler. For example, my writing framework can handle up to 8K screens.

Answer 9

Buy a normal monitor

Answer 10

the only sane layout method if the monitor is smaller than the layout:
1. save the 1:1 layout in jpg\png from photoshop
2. insert it as a backing

html{min-width:1600px;background:red url('maket1600.png') left top no-repeat;}

3. Next, we typeset as usual, the background helps to see mismatches between the layout and the layout, and to view the layout that is not included in the width of the window, drag the horizontal scroll *
* because. we have a forced horizontal scroll, then to evaluate layout errors in width we give red, if there is a jamb - a red edge will appear on the right
** note that body and other layers on top of the substrate are requiredbackground-color: transparent