Help with responsive web design

[David_Letzelter]

Hi,

I try to do responsive web design with client web pages. I have 2 computers, one with 1080p screen, and one with 2160p.

I noticed that the web pages do not adapt to the size of my 2160p screen and this problem seems to be only on ragemp.

For example,  I have dowload this: 

 

 

When I open it on google chrome, it works correctly, UI size is good, but in game, unlike google chrome, UI size does not fit 2160p screen:

https://i.gyazo.com/4aa807864ba95d53669a5f3ef6b6be41.png

https://i.gyazo.com/ef37ea7472afab7f9e1d7da48f2c3a75.png

 

I took this UI as an example, but it does the same thing with all the others. On internet, I read that this line could solve the problem: "<meta name="viewport" content="width=device-width, initial-scale=1" />" but it does not work.

I don't know javascript, html and css well. How can I fix this interface size issue?

Thank you in advance and sorry if my english is not very good.

[krane]

use relative values not pixels

focus on vw / vh, and calc()

[David_Letzelter]

On 11/30/2023 at 6:31 PM, krane said:

use relative values not pixels

focus on vw / vh, and calc()

Hello,

I'm not sure I understand what to do. Do you have an example ? What exactly should I change in the scripts ?

Here are the scripts:

index.html:

https://i.gyazo.com/579d432946a438e0952dc58e1edc4d36.png

 

font-face.css:

https://i.gyazo.com/37f8e34e059576c58f61bff64626f004.png

 

style.css:

https://i.gyazo.com/7bbeba5463b529928ff816d1bd9afb07.png

https://i.gyazo.com/7a394d1d13780b651eff803ef80c650b.png

[krane]

On 12/3/2023 at 10:01 PM, David_Letzelter said:

Hello,

I'm not sure I understand what to do. Do you have an example ? What exactly should I change in the scripts ?

Here are the scripts:

index.html:

https://i.gyazo.com/579d432946a438e0952dc58e1edc4d36.png

 

font-face.css:

https://i.gyazo.com/37f8e34e059576c58f61bff64626f004.png

 

style.css:

https://i.gyazo.com/7bbeba5463b529928ff816d1bd9afb07.png

https://i.gyazo.com/7a394d1d13780b651eff803ef80c650b.png

change everywhere you have PX to be vw/vh or calc(vh-10px) or whatever fits 

a responsive design shouldn't have any "px" in them other than border radius and whatnot, PX is absolute, VW is relative to window width, you should stay away from absolute values

[David_Letzelter]

Hi,

After many hours spent testing because I'm bad in web development, it finally works.

Thanks !