mobile screen height problem RSS

3 replies

Last post Feb 01, 2017 07:39 AM by Zhi Lv - MSFT

‹ Previous Thread|Next Thread ›

Shortcuts

- Reply
2xo1
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
- Reply
Rajsasp
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

ifour.nishit...

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

<!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.

Nisith Tukharia
Software developer
custom software development company India

- Reply
Zhi Lv - MSF...
All-Star

45449 Points

7008 Posts

Microsoft

Re: mobile screen height problem

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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›

mobile screen height problem RSS

3 replies

Shortcuts

mobile screen height problem

Re: mobile screen height problem

Re: mobile screen height problem

Re: mobile screen height problem

2xo1