Make header and page container width match

  • Peg O’Hagan

    (@arpgst)


    1 year, 8 months ago

    I would like to have the header container and the body container be the same width and still be responsive.

    I have set the header to “content width” which moved the content in, but the background is still wider than the page section. I am using a responsive section for the page content but it only seems to have the option to set the width at a specific number of pixels.

    I know I can empty the header and put that content in the page container, but I need the menu to switch to the hamburger for mobile/small screens.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Peg O’Hagan

    (@arpgst)

    1 year, 8 months ago

    I switched to full width and it is close but still a few pixels off on each side.

    I was able to do what I wanted on the non-Wordpress site I am trying to copy.

    Herman Asrori (BSF)

    (@bsfherman)

    1 year, 8 months ago

    Hi @arpgst, so sorry for the delay.

    What if you change the Layout to Full Width / Stretched? Will it work for you?

    Looking forward to hearing from you.

    Kind regards,
    Herman 🙂

    Thread Starter Peg O’Hagan

    (@arpgst)

    1 year, 8 months ago

    I thought I did that before I asked. I somehow got it to work since then, or at least it is pretty close (haven’t tested other desktops yet though). Container is now set to full width/contained. Header is set to content width and margin is 20 px; margin on footer is also 20 px. If I could set the container or page margins then I would know they all will stay the same.

    I also put in custom css site-header{width:90%;}
    site-content{width:90%;}
    site-footer{width:90%;}
    container {width: 100%;}
    but I don’t think it made a difference.

    Herman Asrori (BSF)

    (@bsfherman)

    1 year, 7 months ago

    Hi @arpgst,

    The option to adjust the spacing is not available on the Astra free. The only spacing option available on the Astra free can be found on the Customizer > Blog > Single Post.

    However, spacing looks good. The Header, main content, and Footer are looking even. As seen in this screenshot.

    ​Please let us know if you need further assistance or if I am missing something.

    Kind regards,
    Herman 😊

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Make header and page container width match’ is closed to new replies.