Media query exercise

ok. this seems to be what’s displayed in the help video (ive got this far and never watched a video before… and from what i can tell, my code is the same as the code displayed there).

however this is being returned as incorrect.

is this a bug or am i missing something really, really obvious? i’m dying to know what the problem is!

something looks wrong about the p element structuring, but what i’ve got here is the same as in the help resource. sooo… yeah, someone please enlighten me.

thanks code campers.

lizzy

Your code so far


<style>
 p {
   font-size: 20px;}
 

 /* Only change code below this line */
@media (max-height: 800px) { p { font-size: 10px;
}
 /* Only change code above this line */
</style>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Safari/605.1.15.

Challenge: Create a Media Query

Link to the challenge:

@media screen or @media only screen. I dont know if that will make a difference. Also dont know if you are lioking for max-width

Hey @lizzyjane340!

Where is the closing bracket for this

There is only for @media

exercise specifies height… i’m aware width is the convention though. it’s weird.

have tried the screen commands already because i found them elsewhere on the web, still makes no difference.

i’m fairly sure this is a bug at this point…

it’s on the next line as per code camp’s help resources, and moving it makes no difference sadly.

Please give your updated code.

there is no update, ive tried all of the suggestions and nothing is working sadly.

As said, you are missing the closing } for the media query.

Here is your code formatted:

	/* Only change code below this line */
	@media (max-height: 800px) {
		p {
			font-size: 10px;
		}

		/* Only change code above this line */

oh i see what you mean… well, if you add another closing bracket it makes no difference to the run test result. there’s also no additional bracket on the help video, or the help resources.

tried it, and still no joy unfortunately.

how do i copy over another piece of code? it seems to only let me copy over to a new forum post…

Just copy and paste the code from the editor. Use the format button </> on the toolbar for the code you post.


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 it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Did you add the closing } to the code? The code I posted is still missing that, so you can’t just copy paste that, it need the } at the end.

Here is an example:

@media (max-width: 860px) {
  .container {
    max-width: 460px;
  }
}

right ok… let me give this a try.

i’m on an ipad so believe it or not i can’t even copy and paste the code using the current version of code camp editor, or if i can it’s with almost insurmountable levels of difficulty. i have noted what was said about backticks, if i get a laptop soon i will implement that. sadly my laptop was killed recently in a hack :speak_no_evil:

so the best i can do is a screen shot:

oh wait… i’ve done it. so the entire query needs to be in its own brackets with the font-size in child brackets.

sorry about my poor system capabilities when posting. hopefully this is clear enough. tests run, tasks completed.

thanks everyone!

1 Like

Good job.

BTW. You don’t have to use the backtick on the keyboard, you can use the </> button. Look at the gif I posted.

2 Likes

thanks! on an ipad it would need to be the </> option. the issue was more that you cannot copy & paste from the training code on the ipad, unless you’ve downloaded the solution. but yes i could have used this method on the second post.

basically, the sooner i get a functioning laptop the better. i signed up for the harvard CS50 a few days ago, working on week 0 assignment now (scratch based). from week 1 onwards, ipad will not suffice. only the CS50 would skip directly from making cartoons in scratch, to programming in C.

but the lectures are excellent. thanks again!

Learning about logic before learning about a specific language is a pretty clever approach I think. It lets you start to think about things like order of execution, conditional logic, looping, and side-effects before you even know any programming language.

But yes, then switching to C is kind of hardcore. But still not a bad language to start in because it’s so imperative and forces you to do things “manually” and not just use some build-in language features (e.g. Python). C is all about the “how”, which is the complete opposite of Scratch.

I absolutely, agree.

1 Like

not quite, the { at beginning of line is an error

i think u missing 1 closing }
it should be
/* Only change code below this line /
@media (max-height: 800px) {
p { font-size: 10px;
}
}
/
Only change code above this line */