3 bar button wrong position on iPad

David
(@dsanney)

11 years, 7 months ago
I have a few inconsistencies that I would like to address when viewing my site on an iPad in Portrait mode.

Firstly, the 3-bar menu button moves to the top right hand side of the screen when scrolling. When I select the 3-bar menu button to view my pages, some are hidden underneath my logo as I have the sticky header set to transparent. If the 3-bar menu remained in the bottom right hand corner of the sticky header, it would fix the issue.

Secondly, when I first view my home page, the logo is centered but the tagline appears to the right and the 3 bar menu appears in the bottom right hand corner below the tagline, so it is taking up a lot of space.

Is it possible to have the logo appear on the left, the tagline to appear in the right hand corner, and the 3 bar menu button (as mentioned above) to remain in the bottom right corner?

Thirdly, when I am viewing the Featured Pages images, the featured text is almost sitting on top of the image below it (which is a problem in itself) except for Red Wine where there is padding between the button and the image below.

To address this issue and to reduce spacing between the Featured Images, I added the following to a media query:
```
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
.fp-text-one, .fp-text-two, .fp-text-three, .fp-text-4, .fp-text-5, .fp-text-6 {
    min-height: 40px;
    margin-bottom: 5px;
}
}
```
Whilst the first bit works with regards to reduced spacing (min-height), it has no effect on changing the position of the button in relation to the Featured Image below. I’ve also tried using padding: 5px; with the same (non) result.

Any suggestions?

Thanks

Viewing 1 replies (of 1 total)

(@rdellconsulting)

1) This will reduce the whitespace and move to right:

.navbar-wrapper .navbar {
  float: right;
  width: 30%;
}

2) You need an @media to effect those items:

@media screen and (max-device-width: 768px) {
.tc-header .brand a {
  float:  left;
}
}

3) Start with this:

.fpc-widget-front .fpc-btn {
  margin: 20px;
}

Viewing 1 replies (of 1 total)

The topic ‘3 bar button wrong position on iPad’ is closed to new replies.