[resolved] Header, prefooter sizing problem with mobile view (5 posts)

  1. erindx
    Posted 1 year ago #

    I have a problem with the mobile view of my site where the header and prefooter extend way out from where the page ends.

    If you minimise the browser you can see it when you scroll across, and I have a screenshot where you can see the prefooter extending out - also only 3 of the 4 images appear across the page, though I am assuming that's about the size of the images.

    Another forum topic mentioned changing the header pixels to em, but that only messed up the desktop version and didn't change the mobile one.

    I'm sorry if it's obvious and I've just missed it. Any help to fix this is very welcome!

  2. erindx
    Posted 1 year ago #

    Sorry, screenshot is here

  3. CrouchingBruin
    Posted 1 year ago #

    The problem is that you've added some custom CSS for the header & footer, which is overriding the CSS for the media query which controls the responsiveness. All you need to do is recopy the media query to the end of your custom CSS:

    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {
       #wrapper {width: 100%; margin: 0 auto; padding: 10px 0;}
       #header, #footer {
          overflow: hidden;
          width: auto;
          position: static;
          padding: 0 20px;
  4. erindx
    Posted 1 year ago #

    Thank you!

  5. erindx
    Posted 1 year ago #

    Thank you!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic