Hi,
Can someone help me understand why the CSS I’ve added for the announcement bar is failing the assessment. You can find what I have so far below. I’m really confused as to what the issue is, it all looks perfect on the preview and identical to the example site.
.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:#db8000;
}
}
Resolved. You have to move “text-transform: uppercase” to be above “padding: 0;”.
I think it may have been because in the code in your original post, there’s no semicolon after text-transform: uppercase
1 Like
I’m having a very similar issue to Scott, please see my CSS below;
.module-announcement-bar {
text-transform: uppercase;
padding: 0;
}
.module-announcement-bar a {
flex-grow: 1;
text-align: center;
padding: 7px 5px;
}
.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:#db8000;
}
}
Hi Tom,
Make sure that you’re following the instructions to add the rules to the specific class you’re targetting.
-
text-transform: uppercase; should be on the .module-announcement-bar a class
-
border: 8px solid#db8000; needs a space after ‘solid’
Let me know if this resolves!
Here’s the updated CSS and still getting an X next to Add the Announcement Bar module and modify the CSS
.module-announcement-bar {
padding: 0;
}
.module-announcement-bar a {
text-transform: uppercase;
flex-grow: 1;
text-align: center;
padding: 7px 5px;
}
// 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: #db8000;
}
}
@afarooque sorry here’s the updated CSS;
.module-announcement-bar {
padding: 0;
}
.module-announcement-bar a {
text-transform: uppercase;
flex-grow: 1;
text-align: center;
padding: 7px 5px;
}
.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: #db8000;
}
}
Hi Tom - make sure you copy the hover instructions exactly from the module.
&:hover
{
background-color: #db8000;
}
As a separate note, you can copy/paste code and format it using the ‘code’ icon in the rich text editor for future posts! It’ll help with the code readability.
Resolved, that worked - thanks!
Hi! I am having a very similar issue. See below for CSS:
.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;
}
}
Hey Ari, are you still having issues? I just checked your account and it looks like it’s passing the rules!
Hi @Robert_Sellar -
Congrats on your first post - welcome to the Hitchhiker Community!
I took a look and see that you have the background color commented out - you’ll want to uncomment that (remove the slashes). Once you do so, you’ll see the Announcement bar color change to be correctly orange.
// background-color: #ff9500;
I am also seeing two .module-announcement-bar .btn CSS sections - I would remove the second one at the bottom.
Let me know if that resolves and if you have any further questions!
Thanks,
Alyssa