PSD in 1920px getting huge in 1366px resolution

Question

PSD in 1920px getting huge in 1366px resolution

Navigation

#1 by (1 votes)

1

Currently I have started to receive PSDs with resolution of 1920px ie the site made for larger screens, however the designers have sent me the site actually made in that size, ie fonts, images and etc, everything prepared for screen but if I cut the PSD images and insert them in HTML, if I use the measures that are in the PSD (height, width, spacing and etc.) for the elements, the site gets extremely large on screens of 1366 (including are the screens that I have here in the office and that develop the sites). I have already discussed the issue with a design but as most of the time our planets are distinct (hehe) it is very difficult to come to a conclusion. Anyway, does anyone have any information to pass me? At that point I do not really know if it's me (programmer) that I'm without the necessary knowledge of the subject or if it's the designers who are working with me.

In order to "masquerade" the problem I'm creating a copy of the PSD by resizing it to 1360 and it is from it that I take the measurements I need such as height, width, spacing and so on. The images I keep cropping from the 1920 PSD however I set the width (width parameter in the img tag) according to PSD in 1360 (did you understand?).

All information on the subject would be of great help. Thank you all right away.

html css psd responsivo

asked by anonymous 28.03.2017 / 15:02

1 answer

Is it possible to instantiate ArrayList dynamically in java? Receive multiple inputs in html tag with Angular 2

score 1 · Answer 1

You need to be aware of responsive sites. What is happening in your case is that using fixed sizes (probably for everything). In that case your site will work perfectly just for one screen size.

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

As I imagine you are doing websites by adapting PSD screens, you can get 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 place sizes that you would like them to be used for large displays and the 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 pull it off. Example:

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

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

The sponsor would be the same:

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

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