Test on code not working

Test on code not working
0
#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

0 Likes

#2


Maby this will help?

0 Likes

#3

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

0 Likes

#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;
  }
0 Likes

#5

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

0 Likes

#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;
}
0 Likes

#7

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

0 Likes

#8
<style>

</style>

img {

max-width: 100%;

display: block;

height: auto;

}

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

#9

// running tests

Your img tag should have a display set to block.

// tests completed

0 Likes

#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.

0 Likes

#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

0 Likes

#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.

0 Likes

#13

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

0 Likes

#14

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

`

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

#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

0 Likes

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

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

#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

0 Likes

#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.

0 Likes

#19

I think I understand what you’re trying to do. What @ieahleen 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.

0 Likes