Eliminate Gaps Between Header-Body-Footer on Pages

  • Resolved pinala

    (@pinala)


    13 years, 6 months ago

    Hello and thanks for your time!

    In my current configuration, my header, content and footer backgrounds all flow seamlessly. This works fine on my main page, but for some reason my Pages have huge gaps above and below the main content. Is there some magical spot to modify margins to fix this?

    One solution I have considered is adding a background image that sits behind everything and fills the gaps.

    background-image:url('https://liz.kozik.net/blog/bgcenter.png');
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center;

    However, I have not been able to get this to work. I have tried inserting this into existing CSS groups and created a new CSS group and applied it to the page template, but neither worked.

    Thank you so much for your help! I will happily take any suggestions for strategies to fix this.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Adding this (below) to your stylesheet should clean up the top one.

    Not sure how you have the bottom one configured but ten minutes of fussing with it is not changing a thing. Nothing that normally resolves this is working. I suggest you review the method you’ve used to positioned it.

    .page #branding {
    padding-bottom: 0;
}
    Thread Starter pinala

    (@pinala)

    Thanks for trying to help! I implemented your code, but it doesn’t seem to do the job. The content block is slightly closer, but now the search bar is all misaligned. That doesn’t seem quite right ??

    Thread Starter pinala

    (@pinala)

    Applied the ‘primary’ class to pages, fixed things right up! Thanks again.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Eliminate Gaps Between Header-Body-Footer on Pages’ is closed to new replies.