media query isnt loading corrrectly

Question

I'm currently on the quest towards making a responsive web page that is compatible with IE8. Through some internet help I came close to solving the issue by placing my mobile css content within a css file with a media query and respond js. Two issues have arisen from this approach. On the mobile site, the mobile css under the media query isnt loading properly. Certain changes to the mobile content appear while others simply do not. On the IE8 site, it mostly looks ok with the exception of the top video not showing up, and the width and pictures sizes on another messed up. Any suggestions? Thanks! Heres a snippet of some relevant code

<head style="overflow-x: hidden">
    <script src="//cdn.optimizely.com/js/272026200.js"></script>
    <meta name="viewport" content="width=device-width">
    <title>Dupont Studios</title>
    <link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>

    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="waypoints.js"></script>


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" media="screen" href="style.css" />

    <script type="text/javascript" src="respond.js"></script>


@media screen and (max-width: 400px){
    body{
        font-family: 'Helvetica Neue', 'Helvetica Neue Light', sans-serif;
        margin:0;
        max-width:400px;


    }

section with the messed up ie8 picture

 <div class = 'picture-container' id = 'pc1'>
            <div class = 'large-picture' id = 'lp1'>
                <figure style = 'float:left;width:45%;'>
                    <img src = 'make-up_artist_dupontstudios.png' width = '100%' height = '100%' class = 'no-mobile'>
                    <figcaption class = 'red-cap'>Our Set-Up</figcaption>
                </figure>
                <div class = 'picture-content'>
                    <div class = 'picture-title'>BOUTIQUE PRODUCTION STUDIO</div>
                    <div class = 'picture-text'>We built a boutique full service production studio that allows for
                        one, two and three person ﬁlmed interviews and conversations.
                        We have studio lights, a three camera set-up and remote
                        monitoring. Additionally, our Inﬁnity Wall creates a clean and
                        professional look that allows the ﬁlm to be about the message.</div>
                    <div class = 'small-picture'>
                        <img src = 'hair_and_makeup_dupontstudios.png' width = '175' height = '100'>
                    </div>
                    <div class = 'small-picture'>
                        <img src = 'infinity_wall_dupontstudios.png' width = '175' height = '100'>
                    </div>
                </div>
            </div>
        </div>

update: I've added after each of the stylesheet links. the mobile content is now working but the IE8 is still pretty off. the heights and widths of divs are all over the place in the aformentioned section and the picture sizes are still way out of wack

Answer 1

Put the media query in a style tag:

<style type="text/css">
    @media screen and (max-width: 400px){
        body{
            font-family: 'Helvetica Neue', 'Helvetica Neue Light', sans-serif;
            margin:0;
            max-width:400px;
        }
    }
</style>

You were also missing a closing curly brace on the media query. I added that as well.

Also, move this above the script tag where you load respond.js . Per the docs:

Reference the respond.min.js script (1kb min/gzipped) after all of your CSS (the earlier it runs, the greater chance IE users will not see a flash of un-media'd content)

GolezTrol also brings up a very valid point. You can also save your media queries in an external css file say media-queries.css and then link to it like so:

<link rel="stylesheet" href="media-queries.css" />

This keeps your html files cleaner and makes them much easier to maintain.

Hope this helps.

media query isnt loading corrrectly

Question

1 answers

solution1
0 2013-07-11 18:56:48

media query isnt loading corrrectly

Question

1 answers

solution1 0 2013-07-11 18:56:48

solution1
0 2013-07-11 18:56:48