Help: Viewpoint Elements and Responsive Text

Help: Viewpoint Elements and Responsive Text
0

#1

Hello Everyone!

So, I’m need of more conceptual help, as I believe this challenge is fairly simple. My only two instructions are:

Your h2 tag should have a width of 80vw.
Your p tag should have a width of 75vmin.

And I believe that I just need this code:

vw: 80vw
vmin: 75vmin

But I just don’t know where/how to place it in the code. Do I put it in the style tag with some sort of reference to the

and

tags, or do I put them in the tags themselves? And in general, how do I know when I should put something in a style tag or in the tag itself.

Thank you!
Dylan

Your code so far


<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 (Macintosh; Intel Mac OS X 10.11; rv:60.0) Gecko/20100101 Firefox/60.0.

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


#2

Simply put the following in your Style section

  h2{
      width: 80vw;
  }
  p{
      width: 75vmin;
  }

When you set those in your style section, it affects all these elements in your code. But if these were set like this

<style>

</style>

<h2 style="width: 80vw">Importantus Ipsum</h2>
<p style="width: 75vmin">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>

it will serve the same purpose, but these would not have any effect on other h2, and p element in your code.


#3

Thank you! That was very helpful.