Pages: Module 10 Assessment

Challenge Troubleshooting & Discussion
1

Hi Team,

I’m having trouble with the last item in the Module 10 Pages assessment - though the. CSS I’ve written appears to be working appropriately, i’m not able to pass the last section.

CSS below:.module-announcement-bar {
padding: 0;
}

.module-announcement-bar a {
flex-grow: 1;
text-align: center;
padding: 7px 5px;
text-transform: uppercase;
}

// Override the background color below
.module-announcement-bar .btn {
// background-color: #ff9500;
border-radius: 0px;
word-wrap: break-word;
white-space: normal;
border: 8px;
border-color: #db8000;
margin: 0px;
box-shadow: none;
&:hover
{
background-color: #db8000;
}
}

2

Hey Lindsay,

It looks like you just have two steps left:

  • Uncomment the background-color rule by removing the //. Once you remove this, you’ll see that the background color will turn to orange (the color you’ve specified).
  • Add the border indicated in the challenge. Where you have border: 8px;, change that to border: 8px solid #db8000. This will add a thick darker orange border around your banner.

Let me know if this helps!

3

@afarooque Amazing, thank you!!

1 Like
4

Hi Team,

I’m having trouble like lindsay was, with my challenge getting hung up on the final step. All of my scss seems to be correct and the page has the correct content/link as well:

.module-announcement-bar {
padding: 0;
}

.module-announcement-bar a {
flex-grow: 1;
text-align: center;
padding: 7px 5px;
text-transform: uppercase;
}

// Override the background color below
.module-announcement-bar .btn {
background-color: ff9500;
border-radius: 0px;
word-wrap: break-word;
white-space: normal;
border: 8px solid #db8000;
margin: 0px;
box-shadow: none;

&:hover
{
    background-color: #db8000;
}

}

5

Hi Jacob!

I believe you may have one last step left (something I missed as well!).

  • Uncomment the background-color rule by removing the // . Once you remove this, you’ll see that the background color will turn to orange (the color you’ve specified).

Hopefully this helps!

6

Hi Jacob,

Welcome to the Community! You’re super close here, just missing a # in front of the hex value for the background color. The hashtag is to signal you’re using a hex color code. In this case, you’ll use background-color: #ff9500;

1 Like
7

Hello! I’m experiencing a related issue. I’ve gotten to the last step and have entered the code above but I’m unable to save. The “save” button is greyed out despite making changes to the code. Any suggestions?

image
image962×412 11 KB