+ 23

How to make our web page the same size as the user screen

We have to write the code that user can see the page depending on the screen For example, I wrote the code on my laptop I want to share in sololearn, But when I do, everything is captivating I want the sizes to change according to the user's screen size I don't know how to do it, I don't want do it by bootstrap It should have way using css

html css style

5th Apr 2021, 12:25 PM

Donya Khoobani

10 Answers

+ 15

It would be great if you posted your code here, so we could see the issue. Now we can only guess which solution can help you. Try adding the following meta tag: <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> </head> If nothing is working for you, you can look at my code to figure out how I made my page look great on both mobile and desktop resolutions. https://code.sololearn.com/Wbx9QFDYoK94/?ref=app

6th Apr 2021, 3:16 PM

Igor Makarsky

+ 10

Using CSS media queries 😁 https://www.w3schools.com/css/css_rwd_mediaqueries.asp

5th Apr 2021, 12:30 PM

Manash Saikia [ 45% Active ]

+ 10

Hello there! If I understood right, this should be a solution: Use for width = 100vw and for height = 100vh. Or another solution is to use media queries in css and costumize every element depending from the screen size :) https://www.w3schools.com/css/css_rwd_mediaqueries.asp ℹ️ A tip: - try to use a responsive design with flex boxes :) https://www.w3schools.com/css/css3_flexbox.asp

5th Apr 2021, 12:34 PM

Matthew

+ 10

❴Amit ❵ Mehran Raeesi Mǟɖ↻ôɖɆⱤ💉 Igor Makarsky Atoms~⚛ Matthew Manash Saikia [ 80% Active ] Akashdeep Singh Thank you so much to you all 🙏🙏😊

7th Apr 2021, 6:09 AM

Donya Khoobani

+ 7

make sure that your website's head tag includes this <meta name="viewport" content="width=device-width, initial-scale=1.0"> this makes the website scale itself according to users screen size for more info visit ....https://www.w3schools.com/css/css_rwd_viewport.asp

6th Apr 2021, 8:59 AM

Atoms~⚛

+ 7

Mǟɖ↻ôɖɆⱤ💉 thanks a million That's first time I see this course 🙏🙏🙏🙏😊😊😊

7th Apr 2021, 6:11 AM

Donya Khoobani

+ 6

Akashdeep Singh No , I know this one It's not useful thanks anyway

5th Apr 2021, 2:15 PM

Donya Khoobani

+ 5

you can use media queries(search Google) or relative units like :%, vh, vw, em,...

6th Apr 2021, 9:31 PM

Mehran

+ 4

Mǟɖ↻ôɖɆⱤ💉 that's nice I just found it.

9th Apr 2021, 12:05 AM

Samira

+ 3

Use this in head tag. ⇓ <meta name="viewport" content="width=device-width, initial-scale=1.0"> for more info visit.... ﹀ ....https://www.w3schools.com/css/css_rwd_viewport.asp

7th Apr 2021, 6:03 AM

❴Amit ❵