+ Start a Discussion
Prashant singh 16Prashant singh 16 

Create a simple Lightning Component for Salesforce1 Mobile

Create a simple Lightning component with a styled headline. The headline must use an H1 tag with a CSS class that enforces a 24px font-size. Make the component available in the Navigation Menu of Salesforce1.The component must be named 'MyLightningComponent'.
The component must include an H1 tag with a CSS class named 'headline'. The 'headline' CSS class must set a font-size of 24px.
The Lightning Component tab that is added to Salesforce1 must be called 'MyLightning'

 

 

 

 

<aura:component implements="force:appHostable"> 
    <h1 class="headline">My Lightning Component</h1> 
</aura:component>

<aura:application >
    <h1>Hello Lightning App!</h1>
    <c:MyLightningComponent />
</aura:application>

 

.THIS .headline {
    font-size:24px;
}

 

Challenge not yet complete... here's what's wrong: 
The component is not using the correct CSS for the 'headline' class

 

Thankx 
Prashant

James LoghryJames Loghry
Looks good to me.  Try adding a space after "font-size:" to see if that helps?
 
.THIS .headline {
    font-size: 24px;
}
Anthony HareAnthony Hare
I am currently having a problem with this challenge and am receiving the same message as Prashant. I am out of ideas on what could be the issue if you have gotten past this challenge please help. If you ran into any problems (provided that the above code is correct) please post the solutions. I also don't understand why it is displaying properly in my SF1 app if it is not correct... if anyone has thoughts on that as well, I'd love to hear them.

"Challenge not yet complete... here's what's wrong: 
The component is not using the correct CSS for the 'headline' class"

Thanks!
AJ
Prashant singh 16Prashant singh 16
Hi Anthony Hare 
In this way you can complete your chalange ..





<aura:component implements="force:appHostable"> 
    <h1 class="headline">My Lightning Component</h1> 
</aura:component>

<aura:application >
    <h1>Hello Lightning App!</h1>
    <c:MyLightningComponent />
</aura:application>

 

.THIS .headline {
font-size: 24px;
 }

User-added image


Thanks!
Prashant Singh
Anthony HareAnthony Hare
Thanks for the help, it was finally accepted. :)
Oiswarja PyneOiswarja Pyne

Figured out the issue...the thng is most of are creating the css from MyLightningApp.app tab and hence the css is getting applied for the app not in the component!!

Make sure you're creating the css from MyLightningComponent or MyLightningComponent.cmp tab not from MyLightningApp or MyLightningApp.app tab.