Tribute Page - JS script messing with CSS properties?

So I’m just about to begin on the Tribute Page and having not used CodePen before, was just quickly running some tests to understand the layout. I wanted to just create a simple blue square in the center of the page, using a height and width value of 200px.

The results is a box that is almost twice as tall as it is wide, where it should be 1:1. If I use this same code in other places, it does what I expect, it creates a 1:1 box.

After doing some tests, the issue seems to go away once I remove this from the JS: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js

Should I be concerned about this before beginning making my tribute page? I’m worried it’ll be throwing other values off and will cause further issues down the line.

Image attached showing code and issue.

Thanks,
Joe

Chrome

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

Challenge: Build a Tribute Page

Link to the challenge:

Hi @Jobeyobey !

Welcome to the forum!

The script tag should go in the html section.

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

Thanks for the quick response, but the issue persists when I do this.

Just to be clear, that script was already inside the “JS” area, I’m not quite sure how to explain as I’m still new to this! The script was already plugged into the template provided by FreeCodeCamp.

Are you able to view the project with this link? If it helps see what’s going wrong: https://codepen.io/Jobeyobey/pen/GRMjyKg

EDIT: Just to be clear, removing the FreeCodeCamp script (Which removes the testing functionality) fixes the issue

When I modify your code to specifically target a class instead of the generic div than it works for me using the test suite.

<div class="root"></div>
.root {
  background-color: blue;
  margin: auto;
  width: 200px;
  height: 200px;
}

1 Like

That’s done the trick, thanks! I usually work with classes rather than straight up messing with all div’s anyway, so this’ll work.

Just something of interest, this turns out fine with the p tag, it only seems to be an issue for the div tag.

Maybe I’ll take note of this and come back when I’ve learnt about Javascript and figure out why it’s messing specifically with div tags!