Fixing a header padding issue with Eleven40 responsive design

[MM]

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;
}

 

[rfmeier]

MM,

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

---

Ryan Meier – Twitter

[Author]

Posts