search

rachelfwells / Moodie-Outdoor

Moodie Outdoor Products Website
0 stars 0 forks source link

IPAD/TABLET #38

Open rachelfwells opened 10 years ago

rachelfwells commented 10 years ago

Responsive issues similar to iphone. The screen grabs below are from an ipad mini -

home page - ipad is vertical • Mega menu • Header - logo/search and menu icons are displaced • search button doesnt meet up with green search icon • text on slider images too big and gets truncated

ipad is horizontal • Phone number missing - can the size be reduced? • search button doesnt meet up with green search icon • text on slider images too big and gets truncated

mega menu does work here. yay

rachelfwells commented 10 years ago

photo 4 photo 5 ![Uploading photo 3.PNG . . .]()

rachelfwells commented 10 years ago

photo 1 photo 2

rachelfwells commented 10 years ago

photo 1 photo 3

samadd commented 10 years ago

Header - simplest solution was to reduce the size to ensure that the left and right text don't collide and displace subsequent elements on the header.

rachelfwells commented 10 years ago

Thanks Sam

Sent from my iPhone

On 25 Apr 2014, at 7:29 am, samadd notifications@github.com wrote:

Header - simplest solution was to reduce the size to ensure that the left and right text don't collide and displace subsequent elements on the header.

— Reply to this email directly or view it on GitHub.

samadd commented 10 years ago

Okay, grabbed the ipad to check the stuff that isn't related to sizing / layout.

Although on desktop Chrome, the widths were adequate to avoid collisions before the layout becomes a vertical stack, it was a few pixels out on the iPad vertical layout. Fixed now. No more displacement.

The iPad was picking up the phone number and auto-rendering it as a click-to-call link, and thus dark blue! I've over-ridden that.

Also, iOS-specific was the rounding of input fields by default. Again, I've over-ridden and set the search fields borders to square.

rachelfwells commented 10 years ago

Brilliant. Thank you

Sent from my iPhone

On 25 Apr 2014, at 8:03 am, samadd notifications@github.com wrote:

Okay, grabbed the ipad to check the stuff that isn't related to sizing / layout.

Although on desktop Chrome, the widths were adequate to avoid collisions before the layout becomes a vertical stack, it was a few pixels out on the iPad vertical layout. Fixed now. No more displacement.

The iPad was picking up the phone number and auto-rendering it as a click-to-call link, and thus dark blue! I've over-ridden that.

Also, iOS-specific was the rounding of input fields by default. Again, I've over-ridden and set the search fields borders to square.

— Reply to this email directly or view it on GitHub.

rachelfwells commented 10 years ago

All looks great except one last thing.

rachelfwells commented 10 years ago

The product menu seems to be pushed down on iPad mini

samadd commented 10 years ago

Tricky to debug this one - really the product menu shouldn't appear in this case as the mobile menu icon is in view. Seems to be a consequence of differing measurements being used to determine which layout to present, and it's displaying both.

I've applied a kind of hacky fix. On the ipad mini on that view, it should just show the mobile menu and not allow the mega menu to (mis)display. At least, where I could reproduce it by careful browser re-sizing, it no longer occurs for me.

So give it a quick check and see!