Last post Feb 01, 2017 07:39 AM by Zhi Lv - MSFT
Member
20 Points
96 Posts
Jan 26, 2017 06:01 AM|2xo1|LINK
hello
i need to have the first div to be screen height, i can achieve that on desktop, but fails on mobiles..
i cant get the real screen device height ..
please have a look on that link http://sps-blue-about.tk/well.html
thank you
Participant
761 Points
264 Posts
Jan 26, 2017 06:09 AM|Rajsasp|LINK
Hello,
Please see this answer.
http://stackoverflow.com/questions/16601590/how-to-make-div-bg-image-fit-full-screen-and-allow-scrolling-for-content-underne
31 Posts
Jan 26, 2017 11:07 AM|ifour.nishith@gmail.com|LINK
Hi ,
You can use this below code
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: border-box; } .row::after { content: ""; clear: both; display: block; } [class*="col-"] { float: left; padding: 15px; } html { font-family: "Lucida Sans", sans-serif; } .header { background-color: #9933cc; color: #ffffff; padding: 15px; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 7px; background-color: #33b5e5; color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .menu li:hover { background-color: #0099cc; } .aside { background-color: #33b5e5; padding: 15px; color: #ffffff; text-align: center; font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .footer { background-color: #0099cc; color: #ffffff; text-align: center; font-size: 12px; padding: 15px; } /* For desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} @media only screen and (max-width: 768px) { /* For mobile phones: */ [class*="col-"] { width: 100%; } } </style> </head> <body> <div class="header"> <h1>Chania</h1> </div> <div class="row"> <div class="col-3 menu"> <ul> <li>The Flight</li> <li>The City</li> <li>The Island</li> <li>The Food</li> </ul> </div> <div class="col-6"> <h1>The City</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> </div> <div class="col-3 right"> <div class="aside"> <h2>What?</h2> <p>Chania is a city on the island of Crete.</p> <h2>Where?</h2> <p>Crete is a Greek island in the Mediterranean Sea.</p> <h2>How?</h2> <p>You can reach Chania airport from all over Europe.</p> </div> </div> </div> <div class="footer"> <p>Resize the browser window to see how the content respond to the resizing.</p> </div> </body> </html>
Thanks.
All-Star
45489 Points
7008 Posts
Microsoft
Feb 01, 2017 07:39 AM|Zhi Lv - MSFT|LINK
Hi 2xo1,
2xo1 i need to have the first div to be screen height, i can achieve that on desktop, but fails on mobiles..
From your description, I suggest you could use percent to set the height.
http://www.w3schools.com/css/css_dimension.asp
Besides, based on your description, I suggest you could use Bootstrap to set the response layout:
http://www.w3schools.com/bootstrap/default.asp
Best regards, Dillion
Member
20 Points
96 Posts
mobile screen height problem
Jan 26, 2017 06:01 AM|2xo1|LINK
hello
i need to have the first div to be screen height, i can achieve that on desktop, but fails on mobiles..
i cant get the real screen device height ..
please have a look on that link http://sps-blue-about.tk/well.html
thank you
Participant
761 Points
264 Posts
Re: mobile screen height problem
Jan 26, 2017 06:09 AM|Rajsasp|LINK
Hello,
Please see this answer.
http://stackoverflow.com/questions/16601590/how-to-make-div-bg-image-fit-full-screen-and-allow-scrolling-for-content-underne
Member
20 Points
31 Posts
Re: mobile screen height problem
Jan 26, 2017 11:07 AM|ifour.nishith@gmail.com|LINK
Hi ,
You can use this below code
Thanks.
Software developer
custom software development company India
All-Star
45489 Points
7008 Posts
Microsoft
Re: mobile screen height problem
Feb 01, 2017 07:39 AM|Zhi Lv - MSFT|LINK
Hi 2xo1,
From your description, I suggest you could use percent to set the height.
http://www.w3schools.com/css/css_dimension.asp
Besides, based on your description, I suggest you could use Bootstrap to set the response layout:
http://www.w3schools.com/bootstrap/default.asp
Best regards,
Dillion