How do I format an HTML page so that it automatically adjusts its width to fit the width of the device it is loaded on?

css html5

22nd Jan 2017, 11:48 AM

Nwaburu Emeka Christian

5 Answers

+ 6

body, html { width:100%; height:100vh; }

22nd Jan 2017, 1:05 PM

Valen.H. ~

+ 3

Try to format almost sizes definition in relative units instead of absolute ( fixed size ) units: % are percentage, relative to the element container/parent em is for espacement of letter 'm', is relative to the font-size applied on the element ex like em for 'x' size vw is percentage relative to the viewport width ( visibled zone of your page ), allow to avoid refering % of parent/container vh like vw for the viexport height And add the <meta> viewport tag in the <head> section: <meta name="viewport" content="width=device-width, initial-scale=1">

22nd Jan 2017, 2:15 PM

visph

+ 2

Corrected ;) ( initial-size :P )

22nd Jan 2017, 3:55 PM

visph

+ 1

I would also remove the margin from the body, and if you still want the 10px put it as padding and add box -sizing body { width: 100%; height: auto, margin: 0; padding: 10px; box-sizing: border-box; } p.s There is a typo with the above meta viewport tag: <meta name="viewport" content="width=device-width, initial-scale=1.0" />

22nd Jan 2017, 3:50 PM

Johnny McCaffery