Display:none when rotating smartphone

Question

I'm currently making a website for mobile devices. In style.css I got

#mobilepicture {
display: none;
}

#stockpicture {
float: left;
    position: relative;
    top: -65px;
    left: 100px;
}

This is a part of the mobile.css:

#stockpicture {
display: none;
}
#mobilepicture {
...
}

When switching over to mobile.css everything seems okey (mobilepicture is displayed, stockpicture display:none), until I tilt my phone sideways. When I do that the stockpicture changes to be displayed again. I know it's because of the selector in the beginning:

index.php:

<link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 481px)"  />
<meta name="viewport" content="user-scalable=no, width=device-width" />
</head> 
<!-- Head end-->
<!-- Body start-->
<body>
    <!-- stockpicture-->
    <div id="stockpicture">
            <img src="images/stockpicture.png" alt="stockpicture"/>
        </div>
    <!-- stockpicture end-->
    <!-- Start Container-->
    <div class="container">
        <!-- Content start -->
        <div id="contentindex">
        <!-- Mobile picture-->
            <div id="mobilepicture">
            <img src="images/mobilepicture.png" alt="mobilepicture" width="200" height="300"/>
        </div>
        <!-- Mobile end -->
            <h2> Home </h2>
            <p>Snippet.</p> </div>

  <!-- end .container --></div>

Is there any other way to solve this? or possibly deny the browser to rotate?

Cheers JJ

Can you try adding more conditions, such as height? – entonio Mar 23 '12 at 11:23 — entonio, Mar 23 '12 at 11:23
Tried that, stopped loading the CSS alltogether – user1288103 Mar 23 '12 at 13:58 — user1288103, Mar 23 '12 at 13:58

score 1 · Answer 1 · edited May 23 '17 at 12:27

1

Have you tried adding in orientation to your media query?

/* Portrait */
@media screen and (max-width: 480px) and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (max-width: 480px) and (orientation:landscape) {
    /* Landscape styles */
}

EDIT

Ok, try stripping it all back so you can see what's working and what isn't. For a start I would have one stylesheet with multiple media queries in as this will help performance - Single vs multiple stylesheets in responsive web design

Then strip it all out, and replace with a nice simple media query that does something simple like change the background colour of the body for example.

/* Portrait */
@media screen and (max-width: 640px) and (orientation:portrait) {
    /* Portrait styles */
    body {
        background: yellow;
    }
}
/* Landscape */
@media screen and (max-width: 640px) and (orientation:landscape) {
    /* Landscape styles */
    body {
        background: red;
    }
}

Once you know your actually running the media queries properly you should be able to troubleshoot much more easily.

edited May 23 '17 at 12:27

Community

1
1

answered Mar 23 '12 at 11:36

SpaceBeers

13,617
6
47
61

in index php: --- other stuff

– user1288103 Mar 23 '12 at 13:54
Style.css: /*Stockpicture*/ #stockpicture { float: left; position: relative; top: -65px; left: 100px; } /* mobile picture*/ #mobilepicture { display: none; } Mobile.css: #stockpicture { display: none; } – user1288103 Mar 23 '12 at 13:54
#mobilepicture { float:left; clear: both; padding: 40px 15px 95px 20px; margin-bottom: 100px; } The mobile picture is wrapped inside the content box (image) together with a paragrap (which shouldn't be a problem), the stockpicture overlaps the content box. You need more than that? – user1288103 Mar 23 '12 at 13:55
Could you just put the relevant HTML in an edit on the question? – SpaceBeers Mar 23 '12 at 13:58

Display:none when rotating smartphone

1 Answers1