Remove all padding around header

  • Resolved Vicki_B

    (@vicki_b)


    6 years, 12 months ago

    I would like my header image to fill the screen with no padding or margins. How do I do that? Do I need to use a certain image file format?

    I was able to reduce the top padding using the below css but can’t figure out how to remove it from the sides or bottom. Also there is still padding or margin all around the header-inner that I can’t seem to get rid of.

    .header-bg {
    padding-top: 0px
    }

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Styled Themes

    (@gejay)

    Hello Vicki_

    The theme recommends the header size of 2560 × 260 pixels. Please check the image size and replace the one you are using. The image seems smaller than the natural size. Check and let us know.

    Thanks!

    Thread Starter Vicki_B

    (@vicki_b)

    OK, now the image is 2560x260px. Now the width is fine but there is still white space above and below.

    My custom CSS is:

    .header-bg {
    padding-top: 0px;
    padding-bottom: 0px;
    }

    I tried the same code for .header-inner but it doesn’t have any effect.

    Theme Author Styled Themes

    (@gejay)

    Hello Vicki_B,

    Try adding the following custom css;

    #masthead .header-inner {
    padding: 0px!important;
}
.header-inner .logo {
	display: inline;
}

    Let us know.

    Thanks!

    Thread Starter Vicki_B

    (@vicki_b)

    Yes, that’s perfect! Thank you!

    Thread Starter Vicki_B

    (@vicki_b)

    The complete css, in case anyone wants to remove all padding around their header, is:

    .header-bg {
    padding-top: 0px;
    padding-bottom: 0px;
    }

    #masthead .header-inner {
    padding: 0px!important;
    }
    .header-inner .logo {
    display: inline;
    }

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Remove all padding around header’ is closed to new replies.