WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. erindx
    Member
    Posted 5 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!

  2. erindx
    Member
    Posted 5 months ago #

    Sorry, screenshot is here

  3. CrouchingBruin
    Member
    Posted 5 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;
         }
  4. erindx
    Member
    Posted 5 months ago #

    Thank you!

  5. erindx
    Member
    Posted 5 months ago #

    Thank you!

Reply

You must log in to post.

About this Theme

About this Topic