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
Walden Crabtree
297 PointsCan't figure this one out... making images in div disappear
Task is: "Add 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."
I'm adding '.cupcake { display: none; }' in the media query for max-width 480... and tried several other things, but nothing works.
8 Answers
Calvin Nix
43,828 PointsHey Walden,
Your code should look like this:
@media screen and (max-width : 480px) {
.menu {
width: 100%;
margin: 0 0 2% 0;
float: left;
}
.contact {
width: 100%;
margin: 5% 0;
padding: 3%;
float: right;
background-color: #2e0400;
border-radius: 15px;
}
.cupcake img{
display: none;
}
}
Anthony Moore
2,282 PointsCan you paste the code you are using?
Walden Crabtree
297 Pointsgot someone else looking at it... if they can't help, I'll let you know
Walden Crabtree
297 PointsHi Calvin... I know this is easy (I'm a beginner), wasn't clear from the video how to do it, and I tried a couple things that didn't work.
here's the code from task 3 from this section of the course (I've completed tasks 1 and 2, which was to add code to the media query for max-width 480px, to make the .menu and .contacts elements span 100% of the screen; task 3 I pasted into the original question):
<!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;
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) {
.menu {
width: 100%;
margin: 0 0 2% 0;
float: left;
}
.contact {
width: 100%;
margin: 5% 0;
padding: 3%;
float: right;
background-color: #2e0400;
border-radius: 15px;
}
}
</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>
Walden Crabtree
297 Pointswell, that is ugly. not sure why it came through like that.
Calvin Nix
43,828 PointsNo worries. I formatted it for you. I'm looking through it now.
Calvin Nix
43,828 PointsHey Walden,
The way that you would hide an element is like this
yourelementhere {
display: none;
}
Walden Crabtree
297 PointsI must have picked the wrong element. I tried adding .cupcake { display: none; }
in the media query section and it did not work.
Walden Crabtree
297 Pointsthe question was to hide the image inside the .cupcake div when the device screen is less than 480 px.
Walden Crabtree
297 Pointsthat worked, thanks!
Calvin Nix
43,828 PointsCalvin Nix
43,828 PointsHey Walden,
Do you mind providing the code you are using?