Learn Responsive Web Design by Building a Piano - Step 32

[vincentjdelacruz]

Hello. This step in this module is asking us to " Add another @media rule to apply if the browser window is wider than 769px but smaller than 1199px ."

Wider than 769px would be 770px (and greater) and smaller than 1199px would be 1198px (and smaller). When I use 770px and 1198px the module rejects the code, but when I use 769px and 1199px it accepts it.

I would like to know whether the instructions are perhaps misleadingly worded, or if the min-width in the media query condition is not inclusive (and so setting min-width to 769px not accept screen widths of 769px but rather screen widths of 770px and greater) and similar idea for the max-width (setting max-width to 1199px would not accept screen widths of 1199px, but rather 1198px or less)

Thanks in advance!

Here is a link to the module:

freeCodeCamp.org

And here is the code:

CSS:

html {
box-sizing: border-box;
}

*, *::before, *::after {
box-sizing: inherit;
}

#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px 20px 0 20px;
position: relative;
border-radius: 10px;
}

.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
overflow: hidden;
}

.key {
background-color: #ffffff;
position: relative;
width: 41px;
height: 175px;
margin: 2px;
float: left;
border-radius: 0 0 3px 3px;
}

.key.black–key::after {
background-color: #1d1e22;
content: “”;
position: absolute;
left: -18px;
width: 32px;
height: 100px;
border-radius: 0 0 3px 3px;
}

.logo {
width: 200px;
position: absolute;
top: 23px;
}

@media (max-width: 768px) {
#piano {
width: 358px;
}

.keys {
width: 318px;
}

.logo {
width: 150px;
}
}

@media (min-width: 770px) and (max-width: 1198px){

}

HTML:

Piano

    <div class="key"></div>
    <div class="key black--key"></div>
    <div class="key black--key"></div>
    <div class="key"></div>
    <div class="key black--key"></div>
    <div class="key black--key"></div>
    <div class="key black--key"></div>

    <div class="key"></div>
    <div class="key black--key"></div>
    <div class="key black--key"></div>
    <div class="key"></div>
    <div class="key black--key"></div>
    <div class="key black--key"></div>
    <div class="key black--key"></div>
  </div>
</div>

[anon42932716]

Hello @vincentjdelacruz !

The min-width and max-width are the ends of the @media query adjustments.

This means that the settings will not accept if we enter the 770px and 1198 px because it is like we are attempting to adjust the scale without the query adjustment.

Everything within the range of 769px and 1199px will be affected by the @media query.
But, we are not changing anything without changing the actual values.
As the step is set up to accept the defined @media query, any other change would be rejected.

If I wanted my background color to change to blue between the given parameters of the query, as long as my screen was within that parameter boundary, my background would change. If my original background was white, and my screen was 1200px, it would remain white.

I hope this is clear and answers the question.

By the way, I am just explaining how I have worked when I completed my projects to see the change in my background, or other property changes with @media query.

Keep up the good progress and happy coding!

[vincentjdelacruz]

@anon42932716

ked when I completed my projects to see the change in my background, or other property changes with @media query.

Keep up the good progress and happy coding!

Hi @anon42932716 ! Thanks for your response! I guess based on my understanding, if the step wanted widths of 769px to be included in that media query, and if the value provided to the min-width parameter is inclusive (so if the viewport width is 769px then the styles defined in that media query would be applied), then the instruction should have said something like

“Add another @media rule to apply if the browser window is wider than or equal to 769px …”

Because, again, strictly saying “wider than” would mean not equal to 769px. And that’s what prompted my question, because I thought maybe the reason the module was accepting 769px and not 770px is because the parameter is not inclusive.

I guess my important takeaway here is that if min-width is set to 769px in this particular example, then if my viewport is 769px then the styles defined in that media query will be applied (and similar idea for the max-width).

Thanks again for your response!