how to set webpage resolution that fits on all types of screens

Answer 1

Gordon He may have seen that used with respect to `background-size:cover`, which wouldn't be applicable to the `width` style.

Answer 2

Ch Wasiq I made some fixes to your code with notes to help.

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

See Fix Notes in the HTML code.

FIX Note 1: Tge span tag should not have been nested in ul tag.

FIX Note 2: The closing div tag was missing.

Answer 3

Ch Wasiq I took your code, set a font size 10px on body tag, change the rest of px to em dimension, add a media query for mobile size less than 640p, with default font size changed to 6px.

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

Hopefully from the code, you could understand that a responsive website could be built by using a parent font size (in the body tag) with the rest of elements in em dimension.

We just need to change parent font size for the webpage to be adjusted on different screen width using @media queries.

You may need to add more @media for screen size that you want to test.

Answer 4

Beside em, rem and % can help to build better responsive website.

More information
https://medium.com/code-better/css-units-for-font-size-px-em-rem-79f7e592bb97

Answer 5

There are different ways

CSS
width:100vw;
height:100vh;

JS
window.innerWidth ;
window.innerHeight ;

Answer 6

David Carroll Thanksss. its really helpful but ..my ques is that why this webpage not perfectly fits on mobile screen

Answer 7

Calviղ Thanks bro now i understand it

Answer 8

Ch Wasiq
Can I know what
width : cover
is?

Answer 9

Ch Wasiq Are you coding this page on a computer or phone? Testing your media query styles will require a screen where you can change the size of the browser window.

Answer 10

David Carroll oh I see~

Answer 11

vw and vh means

Answer 12

okyyy helpfull

Answer 13

Gordon I think you meant to type "viewport", not "viewpoint." 😉

Answer 14

viewport in css?

Answer 15

i applied viewport but still webpage does not works on mobile

Answer 16

Can you share your code in SoloLearn Playground?

Answer 17

David Carroll
https://code.sololearn.com/Wowh59kmTHMK/?ref=app

Answer 18

plz correct me

Answer 19

David Carroll oh yes they should be viewport~ I kept knowing them as viewpoint width/height wrongly, thanks for correcting me~ so good to have you at the back^^

Answer 20

For better responsiveness, instead of px, use dimension of em.