Media Queries <body> div works but others do not

Question

Media Queries <body> div works but others do not

97 views Asked by user3453264 At 10 June 2015 at 02:57

I am trying to do media queries for iPhone. However, for some reason the information in the "mobile" div does not show up, the only thing that shows is the background image.

Any help given is appreciated. Thanks in advance.

HTML:

<div id="wrap">
       <div id="header">
            <p id="placeholder">
                full-site<br>coming soon<span>.</span><span>.</span><span>.</span>
            </p>

            <p id="time">
                OPEN DAILY<br>8am &#8211; 8pm
            </p>

        </div>

        <div id="main">
            <img id="animate" src="assets/daily_web_logo_2.gif" alt="The Daily Roundup">        
        </div>

    </div>

     <div id="footer">

        <p id="address">hello</p>

        <p id="colophon"> 
            MADE WITH LOVE BY 
        </p>
    </div>

     <div id="mobile">

        <img id="logotype" src="assets/daily_mobile_logo.png" alt="The Daily Roundup">

        <p id="time2">
            Open Daily 8am to 8pm
        </p>

        <p id="facebook">
            Get The Daily Roundup on Facebook
        </p>

        <p id="email">
            Email us
        </p>

        <p id="address2">hello</p>

    </div>


    </body>

CSS:

*{
    margin: 0;
    padding: 0;
}

html, body{
    height: 100%;
    width: auto;
}


@font-face{
    font-family: "AkkuratPro-Reg";
    src: url("type/AkkuratPro-Regular.otf");
}

body{
    background-color: #faf2da;
}

a{
    text-decoration: none;
    color:black;
}

#colophon{
    color:black;
}

 @media only screen and (min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio : 2){

    html, body{
        height: auto;
        width: auto;
    }

    body{
        background: url(../assets/daily_mobile_background.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
        background-size: cover;
    }

    #wrap, #footer{
        display:none;
    }

    #logotype{
        float:left;
    }

    #time2, #facebook, #email, #address2{
        font-family: "AkkuratPro-Reg", sans-serif;
        font-size: 25px;
        letter-spacing: 1px;
    }

    #time2{
        padding-top:90px;
    }

    #facebook, #email{
        padding-top:40px;
        line-height: 120%;
        text-decoration: underline;
    }

    #address2{
        padding-top:40px;
        line-height: 120%;
    }



 }

Original Q&A

There are 2 answers

Darren S On 10 June 2015 at 03:14

Try changing your media query to;

@media (min-width: 320px) and (max-width: 667px) {
   /* your css here */
}

Something like this; https://jsfiddle.net/c318fnfo/

**I wrestled a bear once.** · Accepted Answer · 2015-06-10 03:07:21

I see nothing referencing your #mobile div at all. Try these.

/* Large desktop */
@media (min-width: 1200px) { #mobile{ display:none; }}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { #mobile{ display:none; }}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { #mobile{ display:block; }}

/* Landscape phones and down */
@media (max-width: 480px) { #mobile{ display:block; }}

That's from Twitter's Bootstrap, by the way

TechQA.

Media Queries <body> div works but others do not

There are 2 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in MEDIA-QUERIES

Popular Questions

Popular Tags

Trending Questions