New course! Every coder should learn Generative AI!
Try a free lesson+ 6
Size screen for the website page
How to create website page in html and css for " siza response automatically " if user open the website page on mobile be size the website page appropriate for screen ?!
15 Answers
+ 6
The magic word for responsive design is: "MEDIA QUERIES"...
+ 5
To play with percentage in heights, you need to force the default behaviour of a html page to change... Default behaviour is to adapt the container block height to the content as minimum size. So, <body> element has this behaviour, and inherit it from <html> element. So, the default height for the two first meta container is... zero. And logically, any element asking for n% of height, is calculate from zero base ^^
Well to modify the root behaviour, we only need to set html and body height to 100%:
html, body { height:100%; }
It works, because parent of <html> is document, which isn't an html element, so his dimensions are inherited from window object, technically the viewport ( display zone )...
+ 4
just put this in your -
<head>
<meta name="viewport"content="width=device-width, initial-scale=1"> & see the mazic ✔
+ 3
you can use % in your css. example width:100%
here is a good read for more info. hope it helps
+ 3
sorry forgot to post the link
https://www.codecademy.com/en/forum_questions/532619b28c1ccc0cac002730
+ 2
just write <meta name="viewport" content="width=device-width"> within <head></head>
we can keep in touch if you want on FB and my name there , the same here
Good Luck
+ 2
you should use bootstrap because bootstrap is designed to fight with this (Responsiveness) problem, it is very difficult to design responsive website without bootstrap. bootstrap is open source and free to use and very easy to use.
Media queries make bootstrap more powerful. like us to know more https://fb.com/eightrockindia
+ 2
Try to use Bootstrap its easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. try to use different tools in your projects...
+ 1
For the width to succeed but the height does not work if you use the width for the percentage
+ 1
need to set with height & width in %
+ 1
i will advice...irst just check that the user is using a desktop or a phone and redirect them to the pages..like 2diffrentpages for 2diffrent devices
0
you use width 100% on every parent div & tag ..
0
Put this between the head tags:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
0
use media queries..
and use width 100% on every parent div & tag..
- 1
html is my project
Often have questions like this?
Learn more efficiently, for free:
Hot today
Problem
0 Votes
USING HTML ONLY!!!
5 Votes
Effects on HTML and JavaScript
0 Votes
Help. Помогите пожалуйста
1 Votes
Dark web access
1 Votes