HTML Problem When We Change Screen Resolution

Question

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

Answer 1

Hey there,
Here is my new code
https://code.sololearn.com/WWndz1f3z8uR/?ref=app

Answer 2

This one helped me (I’m new too)

https://www.w3schools.com/css/css_rwd_viewport.asp

Answer 3

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😸😸

Answer 4

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😥😥

Answer 5

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😺😺

Answer 6

https://code.sololearn.com/W3gS00IGw160/?ref=app

Answer 7

Gordon Thank you very much
It's very useful

Answer 8

Siddharth Golecha InvBoy Satnam Singh Serena Yvonne Candyopoly Arb Rahim Badsa Ashutosh Agrawal JeMa ^_^ 🇨🇩 Ketan[Be Happy😄] Kuba Siekierzyński

Answer 9

Thank you Satnam Singh and Candyopoly

Answer 10

⚡Prometheus ⚡ ⚒️Raj Chhatrala🛡️ Sεηιrυ ραsαη Shawon Eric (BugaBuga) 🇧🇩 Haris

Answer 11

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.

Answer 12

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 !

Answer 13

Bootstrap has its own solution with different classes for different devices and how the elements would be ordered.

Answer 14

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;
}

Answer 15

Ketan[Be Happy😄] Ah, so it was more of a positioning problem than a sizing problem.

Answer 16

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 👍

Answer 17

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...

Answer 18

Use media queries

Answer 19

Helli

Answer 20

<stmp>