+ Start a Discussion
Jon Oddvar KolnesJon Oddvar Kolnes 

CSS for Trailhead project does not validate.


I am trying to complete the "Build a Restaurant-Locator Lightning Component" Trailhead project. I've come as far as to the esction "Add Custom CSS". Even though I copy the exact css-code from the text to the InTheArea.css file I get the error message shown below:

Challenge Not yet complete... here's what's wrong: 
The 'InTheArea' Style does not contain the correct code. Ensure that you copy and paste the code for the style correctly.
Note: you may run into errors if you've skipped previous steps.

The code I've copied to the CSS file is:
    position: relative;
    overflow: hidden;
.THIS.small {
    height: 28rem;
.THIS.medium {
    height: 40rem;
.THIS.large {
    height: 53rem;
.THIS.autoHeight {
    min-height: 100vh;
    height: auto;
.THIS.small .scroll-container {
    height: 22rem;
.THIS.medium .scroll-container {
    height: 34rem;
.THIS.large .scroll-container {
    height: 47rem;
.THIS .ratingStars {
    min-width: 25%;
    max-width: 105px;
.THIS header {
    height: 5rem;
    padding-bottom: .25rem;

I've also updated the component and controller files as described in the description, but the validation does not work. The previous tasks have been validated wthout any issues.

Appreciate any help. Thank you.
NagendraNagendra (Salesforce Developers) 
Hi Jon,

Please find the below post which helps you in the above issue

Best Regards,