Help to Adjust the Height of an Element Using the Height Property

HTML-CSS
1

Hi guys!
How are you?
So, I am trying to finish this lesson, but it is quite hard. However, it is not because the lesson… I get what I have to do: adjust the height property. It is just not working and I don’t know what I am doing wrong.
Please, help!
Thanks!


<style>
    h4 {
    text-align: center;
    height: 25px;
  }
  p {
    text-align: justify;
  }
  .links {
    margin-right: 20px;
    text-align: left;
  }
  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4>Google</h4>
      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36 OPR/63.0.3368.94.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property

2

What do the failing tests say?

3

This:
“Your code should change the h4 height property to a value of 25 pixels.”

5

I am using Opera. But I tried with Chrome and it is the same error =/

7

I did all that you suggest and nothing… =(

8

I think I have seen other people having issues with this challenge, I just can’t figure out what the problem might be. I would be curious to know if you fail on the new version of the challenge as well.

Can you try something?

  1. Right-click the h4 and select “Inspect” from the context menu.

  2. Switch to the console tab.

  3. Paste the following into the console $('h4').css('height') and press enter.

What does the console log out?

If all else fails I’d suggest trying Firefox as some people have reported it to work.

9

That is the result:

$('h4').css('height')
"24.9955px"

I also tried on Firefox and it worked!
So I could finished this lesson! =D

10

Interesting, I think this might be a viewport/zoom bug.

I can see there is an issue open for this challenge. I might have a fix, but as I can’t reproduce this bug myself, it would be super helpful to get some more data. So if you are up for it I have something I’d like for you to try (or anyone else with this bug).

Same steps again but this time use window.getComputedStyle($0).height and then use $0.offsetHeight. Report what each returns.

1 Like
11

It is a pleasure to help!
Here the logs:

window.getComputedStyle($0).height
“73.3091px”
$0.offsetHeight
73

12

Wait it is reporting 73? Did you set the height in the CSS? Did you remember to right-click the element and use Inspect first?

Anyway, the fact that offsetHeight is giving an integer value as expected and getComputedStyle a float (decimal number) gives me hope that the fix I have will work.

Thank you for helping. :+1:

13

Oh, I am sorry. I am new on all this.
I tried again and that is the result (probably the right one now…)

window.getComputedStyle($0).height
“24.9955px”
$0.offsetHeight
25

14

Hey, no problem I just wanted to make sure.

That is the result I was hoping for, thank you very much. You have been most helpful. :slight_smile:

15

Thank you, guys! :heart: