No noticable difference when changing vh in CSS?

HTML-CSS
1

I have an understanding of what vh is in CSS, but when playing around with different sizes on a microsoft edge browser and laptop, I don’t see any difference at all when changing it. It seems like this is something that is not needed.

2

You’ll probably need to give us a specific example so we can see what you are seeing. A link to your project would be great.

1 Like
3

Yeah, I should have done that. I was mainly playing with the code from the survey lesson and the project in the curriculum and using them as an example to make my survey for practice again and to study more clearly what each element and attribute means. I don’t have a “problem” at this point, I am just making an observation. The code I have so far is below:

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="FatCatCafeSurvey.css" />
  <meta charset="utf-8">
  <title>Fat Cat Survey</title>
</head>
<body>
  <h1>Can we really hang out?</h1>
  <p>Please fill out this survey and tell me more about yourself</p>
  <form>
    <fieldset>
      <label>
      What is your name?
      <input/>
      </label>
      <label>How old are you?
      <input/>
      </label>
      <label>What is your email?
      <input/>
    </label>
    </fieldset>

    <fieldset>
    <label>Scan here to add my Wechat</label>
    </fieldset>

    <fieldset>
      <label>Are you a boy or a girl?</label>
      <label>Male<input/></label>
      <label>Female<input/></label>
    </fieldset>

    <fieldset>
      <label>What will be your food of choice at my cafe?<input/>
        <select>
          <option>Please select one</option>
          <option>Coffee</option>
          <option>Tea</option>
          <option>A nice meal</option>
        </select>
      </label>
      </fieldset>

      <fieldset>
        <label>How will we hang out? Check all that apply.<input/></label>
        <label>Hug and cuddle<input/></label>
        <label>Play and run around with me<input/></label>
        <label>Feed me snacks<input/></label>
        <label>Ignore me and eat.<input/></label>
      </fieldset>

      <fieldset>
        <label>Please tell me a little bit more about yourself before you come to the cafe.
        <textarea></textarea></label>
        </fieldset>
        
<input type="text" name="" value="">


  </form>
  </body>
</html>

CSS

ody {
  width: 100%;
  height: 100vh;
  margin: 0;
  font-family: Aharoni, Tahoma;
  font-size: 20px;
}
4

though I did notice a difference when playing with different numbers for it while going through that step in the CSS typography course. Anyways, I am just happy to be learning this and getting a clear picture about what that property does.

5

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