+ 20

HTML Problem When We Change Screen Resolution

It is a problem of every new learner's that if we switch Laptop to PC then the whole content of HTML will place randomly anywhere in the screen. Yes it's good idea to give container or image size into Percentage But Percentage is not work with all tags. Everyone Please can you suggest what to do in this situation that if screen resolution differ the content of HTML remain at same place

1st May 2019, 2:05 PM
Madhav
Madhav - avatar
21 odpowiedzi
+ 1
8th Nov 2019, 3:22 PM
Madhav
Madhav - avatar
+ 37
This one helped me (I’m new too) https://www.w3schools.com/css/css_rwd_viewport.asp
1st May 2019, 2:27 PM
Candyopoly
Candyopoly - avatar
+ 24
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘 Yes😺😺 I was so worried 😧 coz my codes does not look same, what I made using my phone looks distorted in PC. Well atleast now I know how to fix😸😸
1st May 2019, 6:17 PM
Ketan [#Be Happy 😄]
Ketan [#Be Happy 😄] - avatar
+ 21
Madhav I used viewport tags like vw and vh for width and height respectively. But this didn't work on transferring from mobile code to laptop as screen resolution changes😣😣 I too get confused in positioning😥😥
1st May 2019, 3:16 PM
Ketan [#Be Happy 😄]
Ketan [#Be Happy 😄] - avatar
+ 21
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘 When I used my same code in mobile and run it on PC ,it was unordered and divs were dispersed from there places. Well I fixed it the way you told i.e using box to store divs and it really helps😺😺
1st May 2019, 6:04 PM
Ketan [#Be Happy 😄]
Ketan [#Be Happy 😄] - avatar
+ 12
Gordon Thank you very much It's very useful
1st May 2019, 2:26 PM
Madhav
Madhav - avatar
+ 11
Thank you Satnam Singh and Candyopoly
1st May 2019, 2:34 PM
Madhav
Madhav - avatar
+ 8
The percentage always works... You just have to know how to use it. This is not the percentage of the size of the screen, but the percentage of the size of the parent element. If that parent element has no size, the percentage will not work.
1st May 2019, 3:43 PM
InvBoy [ :: FEDE :: ]
InvBoy [ :: FEDE :: ] - avatar
+ 8
I think we should make more use of the "responsive design mode" / "toggle device" feature in the browser developer tools. You can use it to see how your code will look on all screen sizes !
1st May 2019, 9:37 PM
Nyakotey🇬🇭🎹
Nyakotey🇬🇭🎹 - avatar
+ 7
Bootstrap has its own solution with different classes for different devices and how the elements would be ordered.
1st May 2019, 3:00 PM
👑 Prometheus 🇸🇬
👑 Prometheus 🇸🇬 - avatar
+ 5
I'm in the middle of writing a code where I use "vw" for just about every single measurement and it looks fine on my phone screen when it's vertical, my phone screen when it is horizontal, as well as my widescreen PC monitor. When you want something to stay as a square no matter the resolution use either "vw" or "vh" as both the height and width measurement such as: .box { width: 20vw; height: 20vw; }
1st May 2019, 5:07 PM
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘 - avatar
+ 3
Ketan[Be Happy😄] Ah, so it was more of a positioning problem than a sizing problem.
1st May 2019, 6:15 PM
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘 - avatar
+ 3
Nyakotey🎼🎹 Ah, I didn't know there was such a feature. I am just now starting to learn to make use of debuggers and browser developer tools 👍
1st May 2019, 9:40 PM
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘 - avatar
+ 2
Ketan[Be Happy😄] What didn't work for you with it? 🤔 You said that it didn't work when the screen resolution changed but that is exactly what using vw and vh are for versus using other units: making your content still look good no matter what the screen resolution is...
1st May 2019, 5:02 PM
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘 - avatar
0
Use media queries
2nd May 2019, 3:01 PM
Hamdan
Hamdan - avatar
0
Helli
2nd May 2019, 7:21 PM
Siidii Maxamed
Siidii Maxamed - avatar
0
<stmp>
31st Jan 2024, 7:53 PM
Donna Loquinario
Donna Loquinario - avatar