CODEWITHSUNDEEP
csswordpress
Allison Dion
Allison Dion

Reputation: 13

Remove white space from left & right side of header image

I'm currently in the process of setting up my blog, and I am having difficulty formatting the header in the way I had planned.

Here is my site. As you can see, their is extra space on the sides of the header. My goal would be to remove the space, so that the floral pattern is flush with the content box or whatever you call it.

I've gone through my theme's CSS multiple times, and have changed the margins, widths, and paddings on everything and anything possibly associated with the header image, but have had zero luck. Is their something I'm missing?

My blog is hosted through Wordpress and my parent theme is from the Genesis Framework.

Here is the CSS for the header image: 

/*
Site Header
--------------------------------------------- */

.audrie .site-header {
    background-position: center;
    padding:0px 0;
        width:100%;
}

/* Title Area
--------------------------------------------- */

.title-area {
    padding: 0px 0;
    margin-bottom: 30px;
    margin-top: 20px;
}

.title-area h1 {
    margin: 0 auto;
}

.title-area p {
    margin: 0;
}

.header-image .title-area {
    padding: 0;
        width:100%;
}

.site-title,
.site-title a {
    font-size: 64px;
    font-weight: 600;
    letter-spacing: 8px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    overflow-wrap: break-word;
}

.site-title a,
.site-title a:hover {
    color: #747474;
}

.site-description {
    color: #808080;
    font-family: Lato;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: .5px;
    margin: 0;
    text-align: center;
    text-transform: none;
}

/* Full width header, no widgets */

.header-full-width .title-area,
.header-full-width .site-title {
    width: 100%;
}

.header-image .site-description,
.header-image .site-title a {
    display: block;
    text-indent: -9999px;
}

/* Logo, hide text */

.header-image .site-header {
    background-position: center !important;
    background-size: 1000px 200px !important;
    padding: 0;
margin-top:-90px;
padding-bottom:30px;
}

.header-image .site-title a {
    float: none;
    min-height: 200px;
    width: 100%;
}

/* Widget Area
--------------------------------------------- */

.site-header .widget-area {
    float: right;
    text-align: right;
    width: 720px;
}

.header-image .site-header .widget-area {
    padding: 0px 0;
}

.site-header .search-form {
    float: right;
    margin-top: 22px;
}

Any help or guidance in the right direction would be greatly appreciated! Thanks!

Upvotes: 1

Views: 3537

Answers (3)

Andrew Kaye
Andrew Kaye

Reputation: 11

.site-container has a 36px horizontal padding which is causing the whitespace around your header. If you add:

.site-container {
  padding-left: 0;
  padding-right: 0;
}

your horizontal whitespace will disappear, but you'll also need to add:

header {
  background-size: 1100px 200px !important
}

to get the top image to span full width.

Finally to clean it up I'd add:

.site-inner{
  padding-left: 36px;
  padding-right: 36px;
}

so your text has some room on the sides.

Upvotes: 1

LcSalazar
LcSalazar

Reputation: 16821

Your header (.site-header) has a fixed background size of:

background-size: 1000px 200px !important;

But your .site-container div has a max width of 1100px, witch makes your image smaller than the rest. Instead, let it be responsive, as in:

background-size: 100% auto !important;
/*Assuming you have a reason for "!important" */

Upvotes: 1

Sascha Wie
Sascha Wie

Reputation: 28

you could do something like this:

.site-container{
padding: 0
}

.header-image .site-header{
background-size: 1100px 200px !important;
}

.site-inner{
padding: 36px;
}

maybe some !important is needed and check the responsiv-behavior..

Upvotes: 0

Related Questions