1920px PSD getting huge in 1366px resolution

Question

Currently I have started to receive Psds with resolution of 1920px ie, the site made for larger screens, but the designers have sent me the site actually made in this size, ie, fonts, images and etc, all prepared for screen 1920px but if I cut the PSD images and insert them in HTML, if I use the measurements that are in PSD (height, width, spacing and etc.) for the elements, the site gets extremely large in screens of 1366 (which are even the screens that I have here in the office and that I develop the sites). I have already discussed the issue with a design but as most of the times our planets are distinct (hehe) it is very complicated to come to a conclusion. Anyway, does anyone have any information for me? Right now I don’t really know if it’s me (programmer) who is without necessary knowledge of the subject or if it’s the designers who are working with me.

In order to "mask" the problem I am creating a copy of PSD resizing it to 1360 and it is from it that I take the measurements I need such as height, width, spacing and etc. The images I keep cropping the PSD of 1920 but I define the width (width parameter in img tag) according to PSD in 1360 (gave to understand?).

All information on the subject would be of excellent help. Thanks to everyone from now on.

Answer 1

You need to take notice of responsive websites. What is happening in your case is that using fixed sizes (probably for everything). In that case your website will work perfectly only for one screen size.

You should learn to use % for measures and take note of Media Queries. Media Queries, in short, are the best way to, in CSS, you adapt your site to different screens, with a unique CSS by size.

As I imagine you are making websites through PSD screen adaptation, you can take the art that is in high quality for websites (1920px) and decrease them by CSS in Media Queries for other resolutions, or simply use %.

EDIT

To achieve something similar to what you are proposing, you will need to remove the limits imposed by the screen and put sizes that you would like to be used for large monitors and giants at once.

For example, in the main part of the content, your CSS has measures like:

.home main .container {
    max-width: 1055px;
}

@media (min-width: 1200px)
.container {
    width: 1170px;
}

This sets a size limit for the screen, but I see that it wants something huge, occupying the entire screen. So you would need to remove this. Example:

.home main .container {
    max-width: none;
}

@media (min-width: 1200px)
.container {
    width: 90vw; /* ou 100vw dependendo da situação */
}

In sponsor would be the same:

.home .sponsors .container {
    max-width: none;
}

I think starting with this idea you can kill the rest, but any further doubt, just comment.