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

Posted by johnathanfigueroa2
johnathanfigueroa2
5,417 Points

Building Responsive Website, Implementing Media Queries, Code Challenge 1/3

Hey all, I'm stuck on Code Challenge 1/3 as the title states. I can't seem to figure how to solve for this question "Add the appropriate CSS code to the CSS to make images scale with the fluid layout."

so far I have believe it is like so, but it's not working out for me. Any suggestions?

  /* Mobile ----------- */
    @media screen and (max-width : 480px) {
       .img {
        width: 100%;
      }
    }

6 Answers

Christer Nordbø
Christer Nordbø
2,133 Points
Christer Nordbø
Christer Nordbø
2,133 Points

try dropping the "." in front of img.

.img = classname

#img = IDname

img = tag attribute

As a sidenote: The question does not specify that this should happen only when at max 480 px!

Tiernan McAlister
Tiernan McAlister
6,817 Points
Tiernan McAlister
Tiernan McAlister
6,817 Points

Having trouble with the same code challenge. Yes Christer the question doesn't state that the max should be 480, but that line of code:

@media screen and (max-width : 480px

was already in the code before we begin typing. I'm sure that img is a tag attribute and therefore does not require a prefix. It's declared like this:

<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"> /*img declared here*/
      <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>

So there must be another issue. Haven't got my head around it, but when I do, i'll get back to you Johnathan, unless you beat me to it of course ;)

J.T. Gralka
J.T. Gralka
20,126 Points
J.T. Gralka
J.T. Gralka
20,126 Points

Johnathan & Tiernan,

Christer is right. That question doesn't ask you about media queries quite yet. Make sure that your original img rule is correct and sets the appropriate properties.

J.T.

Tiernan McAlister
Tiernan McAlister
6,817 Points
Tiernan McAlister
Tiernan McAlister
6,817 Points

Ah okay,

One step ahead of ourselves haha. Thank you Christer and J.T., I've got everything sorted now :)

johnathanfigueroa2
johnathanfigueroa2
5,417 Points
johnathanfigueroa2
johnathanfigueroa2
5,417 Points

Thank you all for responding! It's the first time I use the forums and it worked out marvelously!

Deleted User
Deleted User

To anyone still confused:

Challenge 1/3 is referring to images in general. Look through the CSS code and find where the code is referencing said images. When you find this, add your code that will allow the images to scale.