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

[nathanhannig]

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.

[RandellDawson]

@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.