Change header background color css

[ppe29]

I’m having an issue targeting the entire row to change the background color. What am I missing when trying to change the background color to the entire header here: http://pumphoists.com/product/pacific-northwest-pump-service-sales-service-body/

Here is my css:

.x-header-landmark {
background-color: #ff551d;
text-align: center;
padding-bottom: 50px;
padding-top: 50px;
}

.x-header-landmark h1 {
color: #ffffff
}

[ppe29]

I know I’m getting close b/c I tested it in inspect mode and it worked, but only in the body tag and also after I unchecked the background-color css that you now see crossed out in the screen shot below.

[nabeel]

Hey there,

Thank you for reaching out to us. Please replace this part of your code:

.x-header-landmark {
    background-color: #ff551d;
    text-align: center;
    padding-bottom: 50px;
    padding-top: 50px;
}

With this:

.x-header-landmark {
    background-color: #ff551d;
    text-align: center;
    padding-bottom: 50px;
    padding-top: 50px;
    width: 100% !important;
    max-width: 100% !important;
}

There was a container width applied on the header landmark, we just needed to make it full width by specifying width: 100% !important; max-width: 100% !important;

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Cheers!

[ppe29]

Darn! I came close to getting it on my own. I didn’t think to use the !important over-ride. Thanks again, guys! Cheers!

[jade]

You’re welcome!