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!
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
livetalent
1,521 PointsCode Challange - Adaptive Design - Implementing Media Queries
Hey guys, if you could look at this code, that'd be a huge help. I've tried looking at their source code and various sites around the internet, but I am unable to find an answer. Thanks for any help!
I am tasked with adding the appropriate CSS code to the media query so that images within the ".cupcake" div disappear when the device or browser width is at most 480px wide.
My problem lies in the first media query. I have tried a few different variants on targeting the image in the cupcake div, but none of them work!
Thanks!
<!DOCTYPE html>
<html>
<head>
<link href="//fonts.googleapis.com/css?family=Nunito:400,300,700" rel="stylesheet" type="text/css">
<style>
body {
background-color: #420600;
color: #FAF3BC;
font-family: 'Nunito', sans-serif;
font-size: 1em;
font-weight: 100;
}
img {
margin: 2% 0;
max-width: 100%;
}
h1 {
font-weight: 100;
font-size: 2.25em;
margin: 5% 0;
}
h2 {
font-weight: 100;
font-size: 1.500em;
color: #B4C34F;
}
h3 {
font-weight: 100;
font-size: 1.25em;
color: #4FB69F;
}
h2, h3 {
margin: 0;
padding: 0;
}
p {
margin: 5% 0;
}
strong {
font-weight: 300;
color: #B22316;
}
div {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
#container {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.menu {
width: 60%;
margin: 0 0 2% 0;
float: left;
}
ul.prices {
font-size: .75em;
list-style: none;
padding: 2% 0;
margin: 0;
}
.prices li {
float: left;
width: 33.3333333%;
}
.cupcake {
border-bottom: 1px dotted #FAF3BC;
padding: 5% 0;
}
.cupcake p {
margin: 0;
}
.cupcake:nth-child(2) {
border-top: 1px dotted #FAF3BC;
}
.contact {
width: 35%;
margin: 5% 0;
padding: 3%;
float: right;
background-color: #2e0400;
border-radius: 15px;
}
.contact span {
color: #B22316;
font-weight: 600;
}
/* Mobile ----------- */
@media screen and (max-width : 480px) {
div.cupcake {
display:none;
}
.contact,
.menu{
width: 100%;
}
}
</style>
</head>
<body>
<div id="container">
<div class="menu">
<h1>Cupcake Menu</h1>
<div class="cupcake">
<h2>Bacon Me Crazy</h2>
<p>Our infamous Bacon Cupcake has a deliciously moist vanilla cake, creamy cream cheese icing, topped with bacon and maple glaze.</p>
<img src="images/cupcake.jpg" alt="Smells Like Bakin">
<ul class="prices">
<li>1 Cupcake: <strong>$3</strong></li>
<li>1/2 Dozen: <strong>$12</strong></li>
<li>1 Dozen: <strong>$19</strong></li>
</ul>
</div>
<div class="cupcake">
<h2>Jalepeno So Spicy</h2>
<p>This spicy cupcake has a chocolatey cake with a kick, creamy vanilla lime icing, and topped with a lime wedge.</p>
<ul class="prices">
<li>1 Cupcake: <strong>$4</strong></li>
<li>1/2 Dozen: <strong>$18</strong></li>
<li>1 Dozen: <strong>$24</strong></li>
</ul>
</div>
<div class="cupcake">
<h2>Avocado Chocolate</h2>
<p>Made with chocolate cake, avocado icing, and topped with walnuts, this cupcake will kick your tastebuds into fiesta mode! </p>
<ul class="prices">
<li>1 Cupcake: <strong>$4</strong></li>
<li>1/2 Dozen: <strong>$18</strong></li>
<li>1 Dozen: <strong>$24</strong></li>
</ul>
</div>
</div>
<div class="contact">
<h3>Custom Orders</h3>
<p>We are always willing to create new flavors! For custom orders and catering options, please contact Smells Like Bakin'</p>
<p>Call us: <span>1-800-CUPCAKE</span></p>
</div>
</div>
</body>
</html>
3 Answers
Felipe Marcos
6,274 PointsHave you tried
img {
display: none;
}
Elliott Frazier
Courses Plus Student 9,647 PointsInstead of
div.cupcake
Have you tried
.cupcake
livetalent
1,521 PointsYes, but thanks anyways :/
Elliott Frazier
Courses Plus Student 9,647 PointsYou need to add a semicolon at the end of your max-width value. I dubt that will help though. :/
Elliott Frazier
Courses Plus Student 9,647 Pointsopps! what I meant to type was this:
.cupcake img { display:none; }
sorry bout' that :P
Elliott Frazier
Courses Plus Student 9,647 Pointsopps! what I meant to type was this:
cupcake img {
display:none;
}
sorry bout' that :P
shane hilton
Courses Plus Student 11,589 Pointsi had, .cupcake { display: none; }
but it would not work when i looked at the code after seeing the answer i realised the .cupkcake was for the div not the img without seeing the answer i would have been pulling my hair out for a lot longer sometimes to make it click to need to see the end result
livetalent
1,521 Pointslivetalent
1,521 PointsThank you! That's it!
James Barnett
39,199 PointsJames Barnett
39,199 PointsFelipe Marcos - In the future rather that just giving away the answer, try giving hints to help point the user in the right direction, so they can learn to solve their own issues. You don't learn a lot from cutting & pasting code from the forum.
Felipe Marcos
6,274 PointsFelipe Marcos
6,274 PointsYou are right, sorry about that.