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
Ryan Dagg
1,739 PointsSolving code challenges the way Treehouse wants.
Hello,
I'm pretty new around here and just ran across the first instance of an issue where I think that I solved a code challenge, but not the way that the program wanted.
In the Content Defined Breakpoints step 2 challenge in Build a Responsive Website I added a new div starting on line 13 so I could target it in the media query.
<div class="grid_2 omega">
<div id="love_at_first_bite">
<img src="img/love-at-first-bite.gif" alt="Love at First Bite">
</div>
</div>
I then added
@media screen and (max-width: 705px) {
.grid_1 { width: 100%; }
.grid_2 { width: 100%; }
.grid_3 { width: 100%; }
.grid_4 { width: 100%; }
.grid_5 { width: 100%; }
.grid_6 { width: 100%; } /* 800px/800px = 100% */
#love_at_first_bite {
display: none;
}
}
</code>
The image disappeared from the mock up window to the right of the code exactly as the challenge requested, but it did not pass.
I ultimately started over from the beginning of the completion of the first step and passed step 2 with
@media screen and (max-width: 705px) {
.grid_1 { width: 100%; }
.grid_2 { width: 100%; }
.grid_3 { width: 100%; }
.grid_4 { width: 100%; }
.grid_5 { width: 100%; }
.grid_6 { width: 100%; } /* 800px/800px = 100% */
img[src*="love"] {
display: none
}
}
Is this going to be a recurring theme that I just need to get used to? Did I misunderstand the implications of my first solution?
I'm also trying to get a better feel for the best way to give the mods everything they need to know in the first post. Do you need me to post all of the code from index. html & style.css?
EDIT: I didn't understand Markdown and have since fixed it.
5 Answers
Jake Craige
4,913 PointsHah, with markdown code you want to make sure each line is indented 4 spaces or more. Also I believe you have to have a blank line before and after it, maybe not, but that's how I get it to work. It's a bit of a pain but better than no syntax highlighting.
There is a specific way they want you to do it usually but there are some workarounds, Occasionally there are people who have problems with it but for the most part it's not really an issue. It's good to bring issues like this up though so the treehouse team can take a look and see if there is a bug or something. Usually one of them will reply to these threads.
Jake Craige
4,913 PointsI was able to solve it using an id on the image itself instead of on an extra div.
If I had to guess, the reason that it's like this is because for best practice you wouldn't really want to put an extra div just to hide a single image, it would be easier to select just that image with an id.
Ryan Dagg
1,739 PointsThank you Jake. I didn't realize that if I could add IDs to images and it would have been a better solution.
Nikolaos Papathanassopoulos
10,322 PointsYou could have solved it also with:
.grid_2 img {display: none;}
it targets all img tags inside the .grid_2 class. (which is suitable for this example, but not for a published website)
Best Regards, Nikos.
James Barnett
39,199 PointsRyan - You can add an ID to any element on the page as well as adding classes to any element on the page. An element can even have an id and multiple classes, if you needed it to.