CODEWITHSUNDEEP
htmlcssmobileresponsive-designmedia-queries
csihar
csihar

Reputation: 25

Div in responsive page ignoring viewport size in mobile browsers

I'm working on making my pet project web app responsive, but I can't get the page to display properly in mobile browsers. My page is basically constructed as a container div, header, navigation bar (which moves from the side to the top when going from desktop to mobile), and a main content div, and all went as expected until I tested on an iPhone (both Safari and Firefox) - the header and nav bar displayed properly, but the content div is way too big and breaks the page. Here are some screenshots to show you what I mean (iPhone/Safari at default zoom, iPhone zoomed out to show the full page, and equivalent window size in Firefox).

Confusingly, this only seems to affect the main content div (.list), as the header and navigation bar still display at the intended size, but I'm having a hard time seeing anything in the code that would make it behave differently.

Relevant HTML:

<!DOCTYPE html>
<html>
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
...
</head>
<body>
<div id="container">


<div id="logoheader"><h1>...</h1><h2>...</h2></div>
<div class="buttonbar">...</div>

<div class="list">
    <h3>...</h3>
    <div class="maintable">
    ...
    ...
    </div>
</div>


</div>
</body>
</html>

Relevant CSS:

body {
    height: 100%;
    width: 100%;
}
#container {
    position: relative;
    top: 0;
    margin: 0 auto 10px auto;
    width: auto;
    max-width: 1250px;
    min-height: 600px;
    white-space: nowrap;
}
#logoheader {
    width: auto;
    min-width: 888px;
    height: auto;
    display: block;
}
.buttonbar {
    position: absolute;
    left: 18px;
    width: 90px;
    display: inline-block;
}
.list {
    position: absolute;
    left: 108px;
    right: 20px;
    min-height: 490px;
    min-width: 750px;
    display: block;
    vertical-align: top;
    white-space: normal;
}
.maintable {
    font-size: .875rem;
    width: auto;
    min-height: 406px;
}

@media screen and ( max-width: 600px ) {
#container {
    max-width: auto;
    min-height: auto;
}
#logoheader {
    min-width: auto;
    width: 100%;
    height: 40px;
}
.buttonbar {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
}
.list {
    position: relative;
    left: 0;
    right: 0;
    min-height: auto;
    min-width: auto;
    width: 100%;
}
.nontable {
    min-height: auto;
   }
}

Upvotes: 1

Views: 1803

Answers (2)

Qiqi Abaziz
Qiqi Abaziz

Reputation: 3353

In your CSS styling for .list

.list {
    position: absolute;
    left: 108px;
    right: 20px;
    min-height: 490px;
    min-width:750px;
    display: block;
    vertical-align: top;
    white-space: normal;
}

remove the min-width:750px and you're good to go :)

Upvotes: 1

designtocode
designtocode

Reputation: 2245

Just add display:inline to your media query for the .list!

I tested it in responsive layout:

enter image description here

As you can see the portrait layout has display: inline and the landscape doesn't, just to show you the difference!

Upvotes: 0

Related Questions