+ Start a Discussion
MatK62MatK62 

Create and Edit Lightning Components Challenge - font size

I am having trouble completing the challenge for the "Create and Edit Lightning Components" module of the "Lightning Components Basics" trail. Here is the challenge:

Create a camping component that contains a campingHeader and a campingList component.
    The campingList component contains an ordered list of camping supplies that include Bug Spray, Bear Repellant, and Goat Food.
    The campingHeader component contains an H1 heading style with a font size of 18 points and displays 'Camping List'.

Here is my code:

camping.cmp

<aura:component >   
    <c:campingHeader/>
    <c:campingList/>
</aura:component>

campingHeader.cmp

<aura:component >
    <H1>Camping List</H1>
</aura:component>

campingHeader.css

.THIS {
}

H1.THIS {
    font-size: 18px;
}

campingList.cmp

<aura:component >
    <aura:attribute name="campingSupplies" type="List" default="['Bear Repellant', 'Bug Spray', 'Goat Food']" />
</aura:component>

When I check the challenge, I get the error message:

Challenge Not yet complete... here's what's wrong:
The component is not using the correct font size.

Any help is greatly appreciated.
Best Answer chosen by MatK62
Nayana KNayana K
campingList.cmp

<aura:component >
    <ol>
<li>Bear Repellant</li>
<li>Bug Spray</li>
<li>Goat Food</li>
</ol>
</aura:component>


campingHeader.css

.THIS {
}

H1.THIS {
    font-size: 18pt;
}
 

All Answers

Nayana KNayana K
campingList.cmp

<aura:component >
    <ol>
<li>Bear Repellant</li>
<li>Bug Spray</li>
<li>Goat Food</li>
</ol>
</aura:component>


campingHeader.css

.THIS {
}

H1.THIS {
    font-size: 18pt;
}
 
This was selected as the best answer
MatK62MatK62
Yes, that worked. Thanks Nayana!
Sagar WanaseljaSagar Wanaselja
I had this exact same problem.  I'm supposed to know there's a difference between 18pt and 18px ? I've been using HTML (badly) for 20 years and I've never needed to care about that difference.  Can't the "Check Challenge" for my org accept EITHER 18pt or 18px?
Bhaskar Thalvayapati 9Bhaskar Thalvayapati 9
Hi Sagar,

There are many ways you measure font sizes.  Points, Pixels,  Ems, Percent and so on. 18pts is equal to 24px in size. Please refer to the link below for additional information on this topic.

http://www.websemantics.co.uk/resources/font_size_conversion_chart/

Hope this helps.

Bhaskar.T



 
Jess BurghJess Burgh
Hey all! I'm trying to complete this challenge and am getting the message that I'm not usuing the correct font size. Here is the code I wrote. Any help would be appreicated!

User-added image
Jan Bremnes 5Jan Bremnes 5
Can't offer any help, but I can confirm that something seems to be wrong with this exercise, because I'm getting the same error and I'm definitely setting the font size to 18pt. 

Did set it to 18px the first time I submitted the answer, so perhaps there's something wrong with the answer checking mechanism that causes it to not read any new code submitted?
<aura:component >
	<h1>Camping List</h1>
</aura:component>

.THIS {
}

H1.THIS {
    font-size: 18pt;
}

 
Jess BurghJess Burgh
Hey Jan. At least it's not just me, was starting to get frustrated. And there has to be something wrong. I tried the code both ways too.
Manu Shubham 12Manu Shubham 12
Here is my code:

camping.cmp

<aura:component >   
    <c:campingHeader/>
    <c:campingList/>
</aura:component>

campingHeader.cmp

<aura:component >
    <H1>Camping List</H1>
</aura:component>

campingHeader.css

.THIS {
}

H1.THIS {
    font-size: 18pt;
}

campingList.cmp

<aura:component >
    <ol>
<li>Bear Repellant</li>
<li>Bug Spray</li>
<li>Goat Food</li>
</ol>
</aura:component>
Jess BurghJess Burgh
I'm still getting the same error message. :(
gr33nj3110gr33nj3110

Yep. Spent a lot of frustrating time troubleshooting this Challenge's issue. Kind of a jerk move for them to show you an example using "px" and then throw in the word "points" for the Challenge. I picked up on that due to my web developer background... but who else would know/notice that?

My eventual fix was to make sure that I was on the "campingHeader.cmp" tab when I hit the "STYLE" button! This will create the "campingHeader.css" file. Previously, I had been on the "camping.cmp" button when I hit the "STYLE" button and that created "camping.css". Of course, when I Preview my app, the display looks like I did everything correctly (because, technically, I did). Regardless of it looking good in the Preview though, the Challenge will not pass you if you didn't happen to build the files exactly like it wanted them built.

The reading does mention: "It limits style rules to only this component, so that you can create styles that are specific to the component, without worrying about how those styles might affect other components." Kind of throws us all off when Preview will apply the "h1" styles to the "Header" component's "h1" tags even though we set the "h1" styles in the "Camping" component's CSS file.

Kent Saxin Hammarström 11Kent Saxin Hammarström 11
In case it helps anyone: My problem with this one (something like "incorrect style applied") was caused by me using the lower case name for the header[!] (i.e. "h1" rather than "H1").
red24red24
Yes, the validator is very vague
pvdpvd
I tried everything, but @gr33nj3110 solution to create the campingHeader.css by pressing "STYLE" on the campingHeader component is what got it to work for me.  Thanks!
Madhurima Dutta 5Madhurima Dutta 5
This is my code for campingHeader.css:
.THIS {
    
}
H1.THIS{
        font-size: 18 px;
    }

It's working perfectly fine.I am not sure why we need pt instead of px.

Thanks & Regards,

Madhurima.
Kenneth SoerensenKenneth Soerensen
It is just not working for me.
I have tested all the solutions possible to get it to accept the style solution, but without any luck.
Some one need to fix the interpiter of this challange.

my solution is like this one:

camping.cmp

<aura:component >   
    <c:campingHeader/>
    <c:campingList/>
</aura:component>

campingHeader.cmp

<aura:component >
    <H1>Camping List</H1>
</aura:component>

campingHeader.css

.THIS {
}

H1.THIS {
    font-size: 18pt;
}

campingList.cmp

<aura:component >
    <ol>
<li>Bear Repellant</li>
<li>Bug Spray</li>
<li>Goat Food</li>
</ol>
</aura:component>

have also used 18px and so forth.
Milan Dutta 21Milan Dutta 21
Hi,
I am also facing the issue:
Challenge Not yet complete... here's what's wrong: 
The component is not using the correct font size. Ensure that you added it to the 'Style' section of the component bundle.


campingList.cmp
<aura:component >
    <ol>
        <li> Bug Spray</li>
        <li> Bear Repellant </li>
        <li> Goat Food</li>
    </ol>
</aura:component>

campingHeader.cmp

<aura:component >
    <H1>camping List</H1>
</aura:component>

campingHeader.css

.THIS { 
   

h1.THIS{ 
    font-size:18pt; 
}


camping.cmp
<aura:component >
    <c:campingHeader />
    <c:campingList />
</aura:component>


Has any one completed this module? If yes, what wrong in he above code? Thanks in advance.
Jon Oddvar Kolnes 5Jon Oddvar Kolnes 5
I can add to this issue and say that I am having the same validation issue.
I have colleagues and friends with the exact same code who's gotten the challenge validated.
I've tried various Trailhead Playgrounds, I've tried the suggested changes to the h1/H1 tag and px/pt, but it doesn't work.
SRI ANUSHA DEVULAPALLISRI ANUSHA DEVULAPALLI
campingHeader:

H1.This{
font-size: 18px;
}

This worked for me.
sandesh kulkarnisandesh kulkarni
I am getting error
The component is not using the correct font size. Ensure that you added it to the 'Style' section of the component bundle.
sandesh kulkarnisandesh kulkarni
I fixed this isue.
Open your camping.cmp component.
from pallete at the right side click on Style.
or press CTRL+SHIFT+4.
campingHeader.css will get added to your bundle.
copy 
.THIS { 
   

h1.THIS{ 
    font-size:18pt; 
}
Save all and check your challange.
 
Petter EikelandPetter Eikeland
Jon Oddvar Kolnes 5, do you still have a problem with this module?
You might have to change your locale and language settings to English for your Trailhead Playground for it to work