Customizing Page Branding - Module Assessment

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.
image

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 Team,

I am also sadly struggling on this.

Can anyone advise me on what’s going wrong?

https://sandbox.yext.com/s/2537227/landingpages/32671/edit?uep={"entities"%3A[8100115]}https://sandbox.yext.com/s/2537227/landingpages/32671/edit?uep={"entities"%3A[8100115]}

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