Header, prefooter sizing problem with mobile view

  • Resolved erindx

    (@erindx)


    12 years, 3 months 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!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter erindx

    (@erindx)

    12 years, 3 months ago

    Sorry, screenshot is here

    CrouchingBruin

    (@crouchingbruin)

    12 years, 3 months 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;
     }

    Thread Starter erindx

    (@erindx)

    12 years, 3 months ago

    Thank you!

    Thread Starter erindx

    (@erindx)

    12 years, 3 months ago

    Thank you!

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

The topic ‘Header, prefooter sizing problem with mobile view’ is closed to new replies.