Gray “bar” above and below page graphic image

[Sandy Sailer]

On this site, http://dev.dansconsulting.com/share-your-passion-for-data/, how do I remove the gray horizontal “bar” above and below the graphic of the gears. I believe this is a widget area, is that correct? My client doesn’t want to use or see this area at all, so I need to “hide” it. Thank you.

[Anonymous]

On style.css you can see this line :

#cir-banner {
    background-color: #ddd !important;
    background-position: center center;
    margin-top: -10px;
    min-height: 8px;
}

change code to below one to remove the top background color :

#cir-banner {
    background-position: center center;
    margin-top: -10px;
    min-height: 8px;
}

The bottom horizontal bar is not actually a horizontal bar it’s due to the gap between banner and breadcrumwrapper. It can be removed by removing margin bottom of the

tag of banner, Use the below CSS

#cir-banner .textwidget p {
    margin-bottom: 0 !important;
}

I hope you’re using child theme so those changes are implemented in child theme 🙂

[Sandy Sailer]

This code did not remove the top background color:

#cir-banner {
background-position: center center;
margin-top: -10px;
min-height: 8px;
}

But the bottom “gray” band is now gone. 🙂

[Sandy Sailer]

…and, yes, I’m using a child theme. 🙂

[Anonymous]

Your child theme’s style.css still has this code : http://dev.dansconsulting.com/wp-content/themes/circumference-child/style.css?ver=4.0.1

#cir-banner {
    background-color: #ddd !important;
    background-position: center center;
    margin-top: -10px;
    min-height: 8px;
}

change it as it’s requested above.

[Sandy Sailer]

Okay – I removed the above code and replaced it (in the child theme style.css) with the new code, but the top gray band is still showing up on the site. Does it have something to do with the min-height specification? Should I remove that?

[Anonymous]

Dear Sandy,

That bar is not gray anymore it’s white as background you can see it here : http://prntscr.com/5fzzx4 . It may be your cache.

[Sandy Sailer]

Okay – but how do I get rid of that space, so the image lies directly below the nav bar? I want to eliminate the space itself. Thanks.

[Anonymous]

ok for that change this CSS

#cir-banner .textwidget p {
    margin-bottom: 0 !important;
}

to

#cir-banner .textwidget p {
    margin-bottom: 0 !important;
    margin-top: 0.6em;
}

And note that there is small thin white part of top of the image.

[Sandy Sailer]

I’m calling it perfect. Thank you!!! 🙂

[Author]

Posts