Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Resizing a webpage to fit in to iPhone screen Reply To: Resizing a webpage to fit in to iPhone screen

#158155
Merri
Participant

I made it more compact and replaced floats with inline-blocks.

http://codepen.io/Merri/pen/bBsdA

If you wonder why there are font-sizes and margins with both px and rem… px are fallback for browsers that don’t support rem. Default font-size on all modern browsers is 16px, so 1rem = 16px. rem = html element font-size.

rem is being used because I used the zero font-size trick to remove white space between the inline-blocks. I also used white-space: nowrap; to make it impossible for the tree to break into pieces (like it does with floats).

Also, don’t use viewport meta tag in this case unless you see the trouble to add media queries to resize the tree appropriately for all the target screen sizes. If you do see that trouble then you can use meta tag with device-width and initial-scale of 1, which is the only meta tag you should use on responsive sites.