Responsive behaviour in 4k

Hi!

I’m facing this issue:

I’ve been developing my web site on my laptop which has a full HD screen (3200x1800).
However, I realized that the whole design looks pretty different when I see the web in a 4K screen (3840x2160).
Specifically, everything looks bigger, too tight and the responsive seems not to work properly.
Obviously, these modifications affect the final appearance of the web (and definitely, the web looks much uglier in 4k compared to the HD version).
Please check the images below with a comparison between both screen resolutions.

Is there any way to solve this and make the web look the same in both screen resolutions?

Many thanks!!

Hey Pamela,

We first like to know if you’re using the same browser in your HD and 4k screenshots? Please also tell us what browser name and version you’re using as well as Operating System and its version.

Thanks.

Hi Christian,

The browser in both cases is:
FIREFOX Quantum v.68.0.2 (64-bit)

Operating System in HD screen laptop:
WINDOW 10 PRO v.1903 (18362.329)

Operating System in 4K screen laptop:
WINDOW 10 PRO v.1809 (17763.678)

Many thanks!

Hello Pamela,

This is your screens looks like on my 1920x1200 screen using Firefox Quantum:

In 4K screen, it seems that the pixels were double up which is why it looks like it is messed up. In your Firefox browser, make sure that the page is not zoomed in and reset it to zero.

Hope this helps.

Hi RueNel,

Thanks for your help.

I’ve checked the Firefox browser and it is not zoomed (is set by default at 100%, as you can see on the screenshot below). But, if I decrease the zoom, the web looks much better. Actually, this is how it’s supposed to look (please, check the screenshot).

Hi Pamela,

Please check the Resolution of this laptop. It is possible that even-though you have a big screen, the Resolution is still set to low.

How to Change Screen Resolution in Windows 10

Let us know how it goes,
Cheers!

Hi Friech,

Many thanks for your response.

I’ve checked the resolution settings and both, resolution and scale, has its recommended number by default. This resolution is the highest possible. (Please check the screenshots)

Hi Pamela,

Could you try setting the 300% down to 100%? It’s usually the 100% the actual size. It shouldn’t low and shouldn’t be high, it should be an exact scale of screen size, which is 100%.

Thanks and let us know.

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