gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Media query solution for Responsive Web Design (#33991)

Browse Source 
* Media query solution for Responsive Web Design

This is in response to the required solution for the challenge solution section.

* fix: solution
This commit is contained in:
Eunice Brackett
2019-02-16 05:43:54 -08:00
committed by Aditya
parent 9c3145ea49
commit 21f5427c14
1 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.english.md
View File

@ -47,7 +47,7 @@ tests:
}
/* Add media query below */
</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>
@ -62,7 +62,20 @@ tests:
## Solution
<section id='solution'>
```js
// solution required
```html
<style>
p {
font-size: 20px;
}
@media (max-height: 800px) {
p {
font-size: 10px;
}
}
</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>
```
</section>