Menu/Logo area displayed wrong on Ipad

Hi: I'm having an issue with the style of the template when browsing in the iPad. For some reason the menu slides below the logo. Both those elements are ccsd (by gavick) to float left, and it looks good on the iphone and any pc browser, but it fails in the iPad. Can anyone check it out to see how can I css my way out of this problem. Thanks in advance! http://www.merkuriopictures.com

Please open file tablet.css from template/css directory and in line 19 where you can find this selectors

Code: Select all

#gkMainMenu {margin-left: -6px }

replace this code with :

Code: Select all

#gkMainMenu {margin-left: -6px; clear: none !important }

Perfect. This fixed the problem! Thank you very much for such a quick reply

I also have another issue on the iPad and iPhone (not on desktop or laptop).

At the bottom of the pages there's a blank space. It looks like a place for mobile banners. Any way to to turn that off? Thanks again for your help.

This area is caused by the device proportions, the only thing that comes to my mind is to add some margin to this video area to display it lower that it is now. Please try to add this code to tablet.css

Code: Select all

#gkPageContent {margin-top: 80px}

This worked fine but I changed the css to

Code: Select all

#gkPageContent {margin-bottom: 80px}

to push the bottom menu down to the bottom of the iPad and iPhone instead of the whole content.

This fix was applied to the iPhone in portrait view and it works really well because if you turn to landscape view the screen is too small to see the whole website and dimensions stay more or less the same.

However, in the iPad, landscape looks awesome, but portrait looks awesomely weird

The problem is that, of course, dimensions are reduced and the bottom menu ends up about half the screen.

With this in mind, I have one question:

1) In a normal display (desktop-laptop) the bottom menu is fixed to the bottom of the screen. Meaning, it is always visible. That is awesome, but is that behavior possible in the iPad?

Thanks in advance for all your help. Gavick team really rules

Yes it is possible, please open file tablet.css and modify this part in line 175 :

Code: Select all

#gkFooter {
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 0 -1px -16px !important;
    max-height: 41px;
    overflow: hidden;
    padding: 0 16px !important;
    position: relative !important;
    right: 0 !important;
    top: 0 !important;
}
}

then change it to :

#gkFooter {
bottom: 0 !important;
left: 0 !important;
margin: 0 0 -1px -16px !important;
max-height: 41px;
overflow: hidden;
padding: 0 16px !important;
position: fixed !important;
right: 0 !important;
}

this should make footer area exactly the same like in dekstop view.

Hi bkrztuk: Tried different options with this but did not have an effect in the page at all. Zero. Not sure why. I had no clue about that fixed position, by the way, now I know Can you check the code to see if there's anything missing. Thanks
.

Please add also this to tablet.css :

#gkFooter {
top: auto !important;
position: fixed !important;
}

The problem was because it was set to 'relative' not 'fixed' position.

Thanks for your patience, bud. I'm almost there

RIght now I have this in tablet.css

Code: Select all

#gkFooter {
top: auto !important;
position: fixed !important;
}

and

Code: Select all

#gkFooter {
   bottom: 0!important;
   left: 0!important;
   margin: 0 0 -1px -16px!important;
   max-height: 41px;
   overflow: hidden;
   padding: 0 16px!important;
   position: fixed!important;
   right: 0!important;
}

This doesn't work in the iPad BUT it works in the iPhone.
I added directly to the tablet.css so I'm not sure why it doesn't take. I deleted browser data but nothing. The iPhone got it without problems. Let me know if something else comes to mind.

Also, I attach a screengrab from the iPhone. There's a gap to right of the menu as it ends before the border of the screen. Tried to css it but hit a wall. I'd like to close it.

Again, thanks again for you help. This is not a priority. I'll check soon for replies. All the best.

photo.PNG

Please look at this screen as I can see it work properly on iPad : http://d.pr/i/WkBA
and have totally different menu view than your on iPhone: http://d.pr/i/pkZk