CSS alignment when changing layouts

Question

I'm working on my portfolio site and I'm a beginner to all this.

I'm using media query to change my site for phones. When I switch my phone to landscape, it get's all out of wack.

Basically I'm having trouble with aligning my logo/contact buttons properly for different layouts. Also, on my phone the footer is completely gone!

Here is my test site I've uploaded: example

My CSS

    body {
    background-color:#0e0c0f;
    margin: 0;
    padding: 0;
}
#container{
    height: 865px;
    font-size: 0;
}
#logo{
    margin-top: 10px;
    position: fixed;
    width: 100%;
    height: 32px;   
}
.nav{
    float: right;
}
#portfolio{
    margin-top: 47px;
    height: 800px;
    white-space: nowrap;
    display: inline-block;
}
#footer{
    background-color:blue;
    position: fixed;
    width: 100%;
    height: 32px;
}
@media only screen and (max-device-width: 800px) {
#logo{
    margin-top: -50px;
    position: fixed;
    width: 100%;
    height: 20%;    
    background-color:#0e0c0f;
}
.logoimage{
    margin-top:15px;
    margin-left:15px;
}
.nav{
    float:right;
    margin-left:15px;
}
#portfolio{
    margin-top: 47px;
    white-space:normal;
    display:list-item;
}
.art{
    width:100%;
}
#footer{
    background-color:red;
    height: 32px;
}
}

And my html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="style2.css">

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='jquery.mousewheel.js'></script>
    <script>
        $(function() {
           $("body").mousewheel(function(event, delta) {
              this.scrollLeft -= (delta * 90);
              event.preventDefault();
           });
        });
    </script>

</head>

<body>
<div id="container">
    <div id="logo">
        <img src="images/logo.png" class="logoimage">
        <img src="images/resume.png" class="nav">
        <img src="images/contact.png" class="nav">
    </div>
    <div id="portfolio">
            <img src="tester.png" class="art">
            <img src="tester.png" class="art">
            <img src="tester.png" class="art">
            <img src="tester.png" class="art">
            <img src="tester.png" class="art">
            <img src="tester.png" class="art">
            <img src="tester.png" class="art">
            <img src="tester.png" class="art">
    </div>
    <div id="footer">
        Help
    </div>
</div>
</body>

</html>

Any help or tips is greatly appreciated.

You're going to have to post relevant code. Your CSS, at the very least. — QuestionMarks, Dec 22 '15 at 17:51

score 1 · Accepted Answer · answered Dec 22 '15 at 20:07

1

In your CSS media query, try using max-width instead of max-device-width

answered Dec 22 '15 at 20:07

bruh

2,205
7
30
42

Np. `max-device-width` is the size of the actual screen. So if you're on let's say a laptop that is 1400 x 900, and you shrink the browser down to a small width - the *screen* still exceeds your condition, thus media query will not be applied. `max-width` will instead target the browsers viewport, which is what you want. More on that [here](http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web) – bruh Dec 22 '15 at 20:32

CSS alignment when changing layouts

1 Answers1