Test on code not working

freeCodeCamp Support
1

HI,
I am on challenge “Responsive Web Design Principles: Create a Media Query”. I input my code and it keeps telling me I have it wrong. The message I am getting is:
// running tests
Your p element should have the font-size of 10px when the device height is less than or equal to 800px.
// tests completed

I have run my code several times and checked it against the hint but I keep getting that message. I don’t know what to do. My code is:

/* Add media query below */
  @media (max-height: 800px){ 
    p {
    font-size: 10px;
      }
  }

Thank you

2

Maby this will help?

3

Thank you for that info. I tried doing the same thing as the solution but it still won’t pass the test

4

I’m having a problem with making an iage responsive. This is the correct answer… I copied it from video help and it still shows error

Your img tag should have a display set to block.

<img  {
    max-width: 100%;
    display: block;
    height: auto;
  }
5

If this is how you have your css selector the issue is here. The css selector can’t start with <

6

This is not working. I copied and pasted from the video. That didn’t work. I copied and pasted from hint. That didn’t work.

  img {
  max-width: 100%;
  display: block;
  height: auto;
}
7

You may need to provide all your code and the result of the tests

8 
<style>

</style>

img {

max-width: 100%;

display: block;

height: auto;

}

src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
9

// running tests

Your img tag should have a display set to block.

// tests completed

10

Your img tag should have a max-width set to 100%.

Your img tag should have a display set to block.

Passed

Your img tag should have a height set to auto.

11

Please format your code using backticks, you can select the code you are pasting in the post editor and use the </> button to format it so that it is correctly visible

12

@dianetrotter

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

13

There is not an img tag and you should put css rules inside the <style></style> tags

14

I had to find out what a backtick is. I hope this is it:

`

``` img { max-width: 100%; display: block; height: auto; } ```
15

That is s back tick, but you need to put the backticks on their own line

You need to post you whole code to get a feedback

16 
<style>
img {
  max-width: 100%;
  display: block;
  height: auto;
}
</style>

src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
17

I don’t know if it is because of the formatting not working (please format whole code not just css), but you are missing the img tag

18

Hi, I’ve edited your code for readability again. When you post code, can you put all the code in the backticks, not just bits of it.

19

I think I understand what you’re trying to do. What @ILM says is correct, there isn’t an image tag in your code. You say earlier that you copied and pasted from the hint & the video, but you didn’t actually do that, not accurately.

I think, and correct me if I’m wrong, that you’ve tried to do this:

<img {
  max-width: 100%;
  display: block;
  height: auto;
} src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">

This is not correct, it’s won’t work, and if you look at examples, it does not match them at all.

The CSS style goes in the <style> block. In that style block you select which element you want to style and apply styles to it. In this case, it is an HTML <img /> tag.

So you should have

<style>
img {
  /* Some styles here */
}
</style>

<img src="https://wbdirifjf.com/eorirj.jpg />

HTML elements have attributes (like src and alt) which can take a value. They look like name="value". This:

<img { max-width: 100%; } />

Does not look like that, it’s not correct.