Responsive Web Design Principles: Make Typography Responsive

HTML-CSS
1

Tell us what’s happening: I need some help on where to place my code for vw and vmin. They did not specify whether to place it in the style section for CSS or elsewhere.

Your code so far

<style>
  h2 {
    vw: 80vw;
  }

  p {
    vmin: 75vmin;
  }
</style>

<h2>Importantus Ipsum</h2>
<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>
```html

<style>

</style>

<h2>Importantus Ipsum</h2>
<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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/make-typography-responsive

2 Likes
2

CSS in that form always goes in the style section if in the same document as the HTML.

Also they are asking you to set width. That’s width: not vw: or vmin: those only go after a number.

3 Likes
3

there is no such property “vw”. i think u refer to width :80vw;. same for height.

5 Likes
4

I made the same mistake as OP. The instruction

"The four different viewport units are:

vw: 10vw would be 10% of the viewport’s width.
vh: 3vh would be 3% of the viewport’s height.
vmin: 70vmin would be 70% of the viewport’s smaller dimension (height vs. width).
vmax: 100vmax would be 100% of the viewport’s bigger dimension (height vs. width)."

suggest the format vw: xvw (in my mind).

Thanks for clearing it up.

1 Like
5

I have very difficulty too. So I think I solved it:

h2 {width: 80vw;} p {width: 75vmin;}
4 Likes
6

I got the same doubt. Thanks @The_True_Bleu for bringing up the question and thanks @Tirjasdyn for your answer.

7

I made the same mistake haha

freecodecamp got me lmao…

8

Thanks for the assistance.