Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

charlesporter
charlesporter
3,308 Points
Posted by charlesporter
charlesporter
3,308 Points

Images and div's (by id) are not going away when I decrease the size of my browser

Hello internet. I am working through the "adaptive" module and the img and div's are not going away when I manually resize my browser to simulate ipads and iphones. What might be going on? 

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Smells Like Bakin' Cupcake Company</title>
    <link rel="stylesheet" href="grid.css" type="text/css" media="screen">
    <link rel="stylesheet" href="style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="normalize.css" type="text/css" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
</head>

<body>

    <div class="container clearfix">
        <div id="logo" class="grid_4">
            <img src="logo.gif" alt="Smells Like Bakin'">
        </div>
        <div id="nav" class="grid_8 omega">
            <ul>
                <li class="about"><a href="#">About</a></li>
                <li class="pricing"><a href="#">Cupcakes & Prices</a></li>
                <li class="locations"><a href="#">Locations</a></li>
                <li class="contact"><a href="#">Contact Us</a></li>
            </ul>
        </div>

        <div id="intro" class="grid_9">
            <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts. </h1>
            <p><a href="#" class="btn">Browse Our Cupcakes</a></p>
        </div>
        <div id ="intro-img" class="grid_3">
            <img src="you-bake-me-blush.gif" alt="You Bake Me Blush">
        </div>


        <div id="featured-cupcake" class="grid_7">
            <h2>Cupcake of the Week</h2>
            <p>This week’s featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. It’s flavors will kick your taste buds into fiesta mode!</p>
            <img src="featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">
        </div>

        <div id="new-cupcakes" class="grid_5 omega">
                <h2>Fresh Out the Oven</h2>
                <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeño So Spicy</a>. </p>
            <img src="new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
            <img src="new-cupcake-jalapeno.jpg" alt="Spicy Lime">
        </div>

            <div id="about" class="grid_7">
                <h2>Inside the Kitchen</h2>
                <p>Smells Like Bakin’ started out in the garage of the husband wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck. </p>
                <p><a href="#" class="btn-small">Read More</a></p>
            </div>


        <div class="grid_5 omega">
            <h2>Get Bakin’ with Us</h2>

            <div id="contact">
                <p>Call us: <span>1-800-CUP-CAKE</span><br>
                Email us: <a href="#">bakeon@smellslikebakin.com</a></p>
            </div>

            <p>We announce all of our new flavors first through Facebook &amp; Twitter, and even take requests!</p>     
            <a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>
            <a href="https://twitter.com/#!/smellslikebakin"><img src="img/twitter.gif" alt="Twitter"></a>
        </div>

        <div id="copyright" class="grid_12">
            <p>© 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
        </div>

    </div>

</body>
</html>

/* Small ----------- */
@media screen and (max-width : 480px) {

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    width:100%;
}
#logo img {
    display: none;
}

#nav ul {
    margin: 5% 0;
}

#nav ul li a {
    -webkit-user-select: none;
    font-size: 0.750em;
}

#nav ul li {
    float: left;
    margin: 5% 0;
    }
    #nav ul  li.about {
        width: 20%;
        text-align: left;
    }
    #nav ul  li.pricing {
        width: 55%;
        text-align: center;
    }
    #nav ul  li.locations {
        width: 25%;
        text-align: right;
    }
    #nav ul  li.contact {
        width: 100%;
        margin: 0;
        font-size: 1em;
    }


#intro, #about {
    display: none;

}
#featured-cupcake, #new-cupcakes {
    margin: 5% 0;
}



}
James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Create a working demo with codepen so we better see what's going on.

5 Answers

charlesporter
charlesporter
3,308 Points
charlesporter
charlesporter
3,308 Points

I set up a profile on codepen but I'm lost on what to do there....... Any help would be great

charlesporter
charlesporter
3,308 Points
charlesporter
charlesporter
3,308 Points

Honestly I deleted the "code" post and had a simple question. Maybe you can answer it. Does a site need to be hosted for Media Querys to work?It appears as if the media querys are simply not working at all. All I am doing is double clicking on the html file and resizing that browser to simulate the different devices. Any thoughts?

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Nope, they should work fine locally too

charlesporter
charlesporter
3,308 Points
charlesporter
charlesporter
3,308 Points

OK thanks. I will start to lookinto how to use the codepen. One more quick question - I am using IE8 will this make a difference with the module code provided by treehouse?

Kristófer Isar Ingimundarson
Kristófer Isar Ingimundarson
632 Points

In my experience with IE in general is that it's like that kid in kindergarten that eats glue in the corner while the other ones play, color, etc.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Yes that makes a huge difference. There's no support for media queries in IE8.

This site show you what features your browser supports

This site gives you an overview of what browsers support what features

Kristófer Isar Ingimundarson
Kristófer Isar Ingimundarson
632 Points
Kristófer Isar Ingimundarson
Kristófer Isar Ingimundarson
632 Points

My experience with IE is that it's just generally stupid when it comes to layout or any sort of interactivity within the website. It has a LOT of 'special needs'.. You should also watch out for older versions of IE in the future.

charlesporter
charlesporter
3,308 Points
charlesporter
charlesporter
3,308 Points

It may be time just accept the fact that I have to go away from Windows and IE. I do ALL of my professional work on DELL and use windows and microsoft office. I am an engineer and these formats work the best in my industry. Wayne's World.... "I fear change!"

Kristófer Isar Ingimundarson
Kristófer Isar Ingimundarson
632 Points

There is nothing wrong with using windows and/or DELL hardware, but beware of IE. I friendly tip: Use Google Chrome or Mozilla Firefox. Just the fact that you are using IE could be your problem. Look into that. :) Kind regards, Kristófer.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Actually IE10's feature support is quite good. Check out this comparison http://html5readiness.com/

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Internet Explorer 8 does not support media queries. Probably why they are not working for you. Internet Explorer 9 does. This is also why we do not use internet explorer. Horrible browser.

Try Firefox, Chrome, or even Opera. Firefox and Chrome or my two everyday go to browsers.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

> This is also why we do not use internet explorer. Horrible browser.

That's not exactly an apples to apples comparison.

If you used a version of Opera or Firefox made at the same time as IE8 it wouldn't have the same features that the current versions do. IE10 actually has pretty good feature support for HTML5 & CSS3 check out this comparison http://html5readiness.com/

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

True, which is a bit scary. I guess my frustration with them as a browser comes from when I was just beginning, I couldn't get anything to look right in IE while it was pretty good in FF, Chrome, Safari, and Opera. I've learned more about why, and what those fixes are. I know a lot of it was my inexperience, but it made me hate that browser.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

There are the pixel perfect folks that tried to re-create a photoshop comp and make it look the same in Firefox and IE6 totally ignoring best practices of using progressive enhancement which in my mind means

Also I really like this quote ...

It seems the call of "IE sucks!" has almost become so ingrained that people can rarely justify the opinion (ditto with "Vista sucks," "Windows is insecure," "Macs cannot get viruses," etc). Frankly once an opinion reaches critical mass in the technology world certain individuals just start parroting it without any thought or consideration as to WHY it was true in the first place.

There's a great article on It’s Time To Stop Blaming Internet Explorer over on Smashing

The associated Hacker News thread makes for interesting reading if you like that kinda thing

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Always giving me food for thought James. I've been in this world a year, and just when I think I start to have things figured out.....I don't! I'll give those a read, and reconsider my position. :)