+ 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

5th Apr 2021, 12:25 PM
Donya Khoobani
Donya Khoobani - avatar
12 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
Igor Makarsky - avatar
5th Apr 2021, 12:30 PM
Manash Saikia [ 45% Active ]
Manash Saikia [ 45% Active ] - avatar
+ 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
Matthew - avatar
7th Apr 2021, 6:09 AM
Donya Khoobani
Donya Khoobani - avatar
+ 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~⚛
Atoms~⚛ - avatar
+ 7
Hello dear 😊 Donya Khoobani -our sololearn starts a new course on making responsive web design. This course will help you to sort your problem finally 🤘 https://www.sololearn.com/Course/Responsive-Web-Design/?ref=app
6th Apr 2021, 4:30 PM
Mǟɖ↻ôɖɆⱤ💉
Mǟɖ↻ôɖɆⱤ💉 - avatar
+ 7
Mǟɖ↻ôɖɆⱤ💉 thanks a million That's first time I see this course 🙏🙏🙏🙏😊😊😊
7th Apr 2021, 6:11 AM
Donya Khoobani
Donya Khoobani - avatar
+ 6
Akashdeep Singh No , I know this one It's not useful thanks anyway
5th Apr 2021, 2:15 PM
Donya Khoobani
Donya Khoobani - avatar
+ 5
you can use media queries(search Google) or relative units like :%, vh, vw, em,...
6th Apr 2021, 9:31 PM
Mehran
Mehran - avatar
+ 4
Mǟɖ↻ôɖɆⱤ💉 that's nice I just found it.
9th Apr 2021, 12:05 AM
Samira
Samira - avatar
+ 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 ❵
❴Amit ❵ - avatar
+ 3
Donya Khoobani u r always welcome 🔥
7th Apr 2021, 6:29 AM
Mǟɖ↻ôɖɆⱤ💉
Mǟɖ↻ôɖɆⱤ💉 - avatar