Fixing a header padding issue with Eleven40 responsive design

Community Forums Forums Design Tips and Tricks Fixing a header padding issue with Eleven40 responsive design

This topic is: resolved

This topic contains 1 reply, has 2 voices, and was last updated by  rfmeier 1 year, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #43388

    MM
    Participant
    Post count: 128

    Hi all,

    On MikeMetcalfe.co, when viewing on ipad/iphone, the Menu splits and there’s a white gap (which I’m trying to remove).

    I assume you can replicate by viewing on decreased browser window frame.

    Have experimented with CSS changes but unable to pinpoint and fix. Current responsive section CSS below. Any ideas? Thks!

     

    .menu-primary,
    .menu-secondary,
    #header ul.menu,
    #header .widget-area,
    #title-area {
    float: none;
    text-align: center;
    width: 100%;
    }

    #header .searchform {
    float: center;
    }

    #header ul.menu {
    background: url(images/bg-pattern.png);
    float: left;
    }

    .menu-primary li,
    .menu-secondary li,
    #header ul.menu li {
    display: inline-block;
    float: none;
    }

    .menu-primary a,
    .menu-secondary a,
    #header .menu a {
    padding: 10px;
    }

    .menu li.right {
    display: none;
    }

     

    #43672

    rfmeier
    Participant
    Post count: 603

    MM,

    Is this still an issue?  I cannot seem to replicate.  Looks good on iPhone and browser re-sizing.


Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Fixing a header padding issue with Eleven40 responsive design’ is closed to new replies.