Understaing @media

I have no idea how to code the @media query requirement in CSS to satisfy the task I’m working on. I did a Google search and looked at several options but still don’t understand how to code it.

I’m in the topic Learn Responsive Web Design->Responsive Web Design Principles → Create a Media Query.

Please let me know what the proper command is to enable @Media in this topic.

Thanks, Joe Breal

Hi Joe,

everything you need can be found in the challenge description. Examples for the necessary syntax are listed directly.

image

Could you share your code?

1 Like

In the first part (in round brackets) you define under which condition the CSS should be adjusted. In this case a device with size smaller or equal 800px.

In the second part (curly brackets) you define the CSS rules that should apply in case the above condition is met. Here you proceed as you learned in the previous challenges. In this case, the font-size of the p element should be changed to 10 px.

Thanks for the reply. I will add it this afternoon. I tried to follow the guide so I’m must have missed typed it

Joe

I figure out what I was doing wrong. I was not interpreting the { /* CSS Rules */ } part of the command correctly. Once I added @media (max-height: 800px) {p {font-size: 10px;}} the test ran correctly. Thanks for taking the time to respond to me. Have a good rest of the week. Joe

@fwdawg74, in the future

If you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

You’re welcome. You also have a nice rest of the week.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.