Jump to content

Help with responsive web design


David_Letzelter

Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...