Https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag

Hi. Can’t get a pass on this lesson.
The requirement is to change font-size of h4 to 27px.
I think I made the right change.
What am I missing?
Thanks.

<style>
  h4 {
    text-align: center;
    background-color: rgba(45, 45, 45, 0.1);
    padding: 10px;
    font-size: 27;
  }
  p {
    text-align: justify;
  }
  .links {
    text-align: left;
    color: black;
  }
  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
  .cardText {
    margin-bottom: 30px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4>Alphabet</h4>
      <hr>
      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

Hello and welcome to the FCC community~!

Take a look at the font-size property you’ve added. Is something missing? :slight_smile:

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

Thanks Sky020. Yes, the code in my post looks much better with the backticks. Not sure though, how my “font-size: 27px;” became “font-size: 27;”

Either way the interpreter / compiler generates an error… Though, it does change the h4 text to 27 pixels.

Please check the uploaded image of my code. What’s missing in this line…
“font-size: 27px;” ?

Thanks again!

Reset the code and try putting it again. It should work.

Hi nhcarrigan. Yes, in the line “font-size: 27” the “px” is missing, but either way, an error is flagged… though, interestingly, either way, the font size of h4 is increased. What is missing? Thanks for your feedback!

Hello again,

Many campers have issues with these challenges, if they have browser extensions enabled with access to freecodecamp.org. Disabling them, and using the latest stable release of Chrome is the best way to ensure compatibility with the tests. (Browser zoom levels also affect the tests)

Hope this helps

Thanks Sky020. Changing the zoom level on my Firefox browser, from 110% to 100%, did the trick! Interesting… does the challenge actually look at the size of the h4 text?

Well, yes. It is annoying, because different browsers do different things with the tests. Here is the code:

assert($('h4').css('font-size') == '27px')

Some browsers return the value of the property, others return the physical pixel space.

Hi GhostRoboXt. Earlier, I had tried resetting the code, but an error was still generated. The fix was changing my Firefox zoom from 110% to 100%. Thanks for your feedback!

1 Like