freeCodeCamp: Applied Visual Design: Adjust the Height of an Element Using the height Property - correct solution does not pass

Describe your problem and - if possible - how to reproduce it

When you provide the correct code the test still fails, this is do to the tests passing the true height of the element and not what the CSS is set to. This issue occurs mainly on smaller resolutions because the height of the element is smaller and converted by the browser.

In my Dev Tools it was saying the true height of the element was 24.99px and when I would scroll out the browser converted the true height to 25.01px. I had to find a sweet spot in my zoom level to where it was exactly 25px.

The fix is to change the test to use regex and not use assert($('h4').css('height') == '25px'

Additional users having issues: https://forum.freecodecamp.org/t/applied-visual-design-adjust-the-height-of-an-element-using-the-height-property/199328/5

Add a Link to the page with the problem

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

Tell us about your browser and operating system

Browser Name: Chrome
Browser Version:
Operating System:

If possible, add a screenshot here

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 15 (13 by maintainers)

Most upvoted comments

Go fo it.

I also noticed the same when zoomed in very far on your screen resolution for https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays

test must be looking at the computed true value of the element instead of the css code that is defining it. Bad practice.

nathanhannig on Aug 28, 2018

@lasjorg How close are we to a cross-browser way to test this? If it is getting too complicated, maybe we should use regex against the code as a fix for now and keep the discussion going in this issue. I would prefer a less elegant regex fix now because the forum is seeing the same topics over and over related to the bugs in these two challenges.

RandellDawson on Nov 7, 2019

I can’t reproduce this bug, I tried zooming and messing with the viewport but nothing makes it trigger, so it is really hard to test.

However, this issue may either be caused by what values are returned by getComputedStyle, or simply the fact that it isn’t guaranteed to return an integer.

getComputedStyle: Notes

The values returned by getComputedStyle are resolved values. These are usually the same as CSS 2.1’s computed values, but for some older properties like width, height, or padding, they are instead the same as used values.

And here is the jquery docs on height().

jquery: height()

The number returned by dimensions-related APIs, including .height(), may be fractional in some cases. Code should not assume it is an integer. Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.

Using offsetHeight might return a more reliable result as it also rounds (returns a long).

offsetHeight

This property will round the value to an integer.

document.querySelector('h4').offsetHeight === 25

Another option would be to do the rounding in the test or remove the CSS style test and just have the regex.

lasjorg on Oct 3, 2019