How to make our web page the same size as the user screen | Sololearn: Learn to code for FREE!

+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

4/5/2021 12:25:57 PM

Donya Khoobani

12 Answers

New Answer

+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

+10

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

+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

+9

❴Amit ❡ Mehran Raeesi MΗŸΙ–β†»ôΙ–Ι†β±€πŸ’‰ Igor Makarsky Atoms~βš› Matthew Manash Saikia [ 80% Active ] Akashdeep Singh Thank you so much to you all πŸ™πŸ™πŸ˜Š

+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

+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

+6

MΗŸΙ–β†»ôΙ–Ι†β±€πŸ’‰ thanks a million That's first time I see this course πŸ™πŸ™πŸ™πŸ™πŸ˜ŠπŸ˜ŠπŸ˜Š

+5

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

+5

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

+4

MΗŸΙ–β†»ôΙ–Ι†β±€πŸ’‰ that's nice I just found it.

+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

+3

Donya Khoobani u r always welcome πŸ”₯