freeCodeCamp Challenge Guide: Change the Font Size of an Element

freeCodeCamp Challenge Guide: Change the Font Size of an Element
0

#1

Font size is controlled by the font-size CSS attribute, like this: h1 { font-size: 30px; }.

px is a unit that stands for pixels

Although this Challenge requires the use of px, there are other units of size measurements used


#2

Hi, Having a spot of bother with this very basic challenge. Code pasted below is good to go, the Run Test button doesn’t seem to think so. Any ideas where the problem exists?

** Code used in the challenge

.red-text { color: red; font-size: 16px; }

CatPhotoApp

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

** End Code used in the challenge

#3

I had the same issue. Turns out you need to separate the p element from the rest of it:
.red-text {
color: red;
}
p { font-size: 30px;
}


Change font size of an element test
#4

for all those who stuck here after correct styling like me for the point
your p element should contain the first few words of the provided additional kitty ipsum text.
use below text in you p tags
kitty ipsum text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.


#5

Thanks @ramsibus, that worked.


#6

Your p element should contain the first few words of the provided additional kitty ipsum text.


#7

I cannot get past this error message:

“Your p element should contain the first few words of the provided additional kitty ipsum text.”

This is my code:

.red-text { color: red; } p { font-size: 16px; }

CatPhotoApp

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

<p kitty ipsum text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

#9

Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.

i am having this problem


Change the Font Size of an Element - Errors I get
#10

Hi code still not working. … any idea why??


#11

Which part of the code?


#12

Hi, This is my first post on the forum.
I just started with the course and can’t seem to get past this point either.
Would someone be kind enough to post the correct code for the complete challenge and then I will probably understand what I am doing wrong; and thus understand the concept better.
Thanks.


#13
.red-text { color: red; } p{font-size: 16px;}

CatPhotoApp

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

This is my code


#14

Browser and Text zoom should be at 100%. how do i pass this?


#15

I’m having the same issue…Did you get any answer??


#16

I am having the same problem like text zoom should be 100%.What is that?


#17

I figure it out guys!!!
Here’s my code

.red-text { color: red; } p { font-size:16px; }

CatPhotoApp

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.


#18

for some reason this still does not work for me ? :[


#19
.red-text { color: red; } p{ font-size:16px; }

CatPhotoApp

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump

Why wont this go through?


#20

im having the same issue it wont work for me either :[.


#21
Try it using the "<div>" tags:

    <style>
      .red-text {color: red;}
      .p {font-size: 16px;}
    </style>

    <h2 class="red-text">CatPhotoApp</h2>
      
    <div class="p">

      <p class="red-text" class="p">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
      <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
      <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

    </div>