Hi Team,
I seem to be stuck on Add the Announcement Bar module and modify the CSS part of the assessment. I have followed all the steps (Add announcement bar, map to text, map to url, move under nav & added css for branding).
This is the CSS I added to the AB:
.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-style: solid;**
** border-color: #db8000;**
** margin: 0px;**
** box-shadow: none;**
** &:hover**
** {**
** background-color: #db8000;**
** }**
Which reflects in the live preview. The inspect a page (http://example-announcement-bar.sbx.pagescdn.com/turtlehead-tacos-45363ac0cf12) for troubleshooting returns a 404 error, so I can’t see where I have gone wrong. I would really appreciate some help/guidance.
I have since tried with no success:
.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: gray;**
** background-color: #ff9500;**
** border-radius: 0px;**
** word-wrap: break-word;**
** white-space: normal;**
** border: 8px;**
** border-style: solid;**
** border-color: #db8000;**
** margin: 0px;**
** box-shadow: none;**
** &:hover**
** {**
** background-color: #db8000;**
** }**
}
Thanks,
Andy
2 Likes
Hi Andrew,
I had the same problem. But condensing the border / border-style / border-color lines into one line “border: 8px solid #db8000” fixed it for me! Hopefully it does for you too.
Matt
5 Likes
Thanks Matt, that worked for me too!
Hi,
I am also stuck on the Add the Annoucement Bar module and modify the CSS part of the assessment. My CSS is 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: gray;
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}
}
Thank you!
If you update this to:
border: 8px solid #db8000;
it should work!
Separately, it doesn’t actually look like the CSS is working – when you look at the preview, the hover color and border color are not appearing. I’ll reach out to engineering on that.
Thanks,
Liz
Hi,
I am also having trouble with my Announcement Bar CSS on this module. In the Console, it says:
“Error > stdin:91
Invalid CSS after " border-radius”: expected “}”, was “: 0px”
}"
I have tried to fix the error but it does not seem to be working. Here is my 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: gray;
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;
}
}
@Jenna_Flug Make sure you have a ; at the end of each line. I would also remove the comments just in case.
Let me know if that helps!
1 Like
That worked, thank you! I also had to include one more } at the very end. Thank you Liz!
Hi,
I’m also having a problem here.
I read all the comments above but don’t understand why it’s not working for me.
Here is what I wrote :
.module-announcement-bar {
padding: 0;
}
.module-announcement-bar a {
flex-grow: 1;
text-align: center;
padding: 7px 5px;
text-transform: uppercase;
}
.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;
}
}
Hi Sarah,
Your issue isn’t actually with the CSS - you just are missing a small piece in the data mappings. Make sure you map the text to the Delivery Disclaimer field.
1 Like
Hello! I’m having a similar issue as to those who have commented above. Heres my CSS:
I’ve also gone ahead and mapped the Announcement Text to Delivery Disclaimer as advised by @afarooque ! Any help is greatly appreciated!
Hi @Kevin_Schoenblum - looking at your account, it looks like it’s passing all the rules! Were you able to resolve your issues?
1 Like
Great, it worked! Thanks!
Yes! I was. I believe I just reloaded the page with the same code and it worked!
Same problem. Corrected. Thanks.
1 Like
Glad to hear your issue is resolved!
