Mobile browser issues

I've noticed 2 issues with viewing the site via phone:

1) GK Product Gallery is not displaying correctly on the front page "Mainbody"
• last image is "pushed" down, leaving a blank space next to the prior product image.
• displays correctly on iPhone, but not on Galaxy Note 2 (Android)
• Screen shot below

2) Video preview window is cropped in posts - iPhone and Android
• iPhone: videos play un-cropped, both YouTube & Vimeo
• Android: Vimeo plays cropped view, full screen not accessable
YouTube plays full view with in cropped window, full screen button is accessible .

Sample Posts:
Vimeo: http://dev.templeofwhomp.com/enjoy-hanplanes/
YouTube: http://dev.templeofwhomp.com/mark-thomp ... -surf-mat/

Hi,

Thanks for your feedback. Regards to first issue, please go to Storebox/css/tablet.small.css and around line 114 add this code:

Code: Select all

.gk-product-gallery .gk-images-wrapper.gk-images-cols3 > div:nth-child(2n+1),
.gk-product-gallery .gk-images-wrapper.gk-images-cols4 > div:nth-child(2n+1),
.gk-product-gallery .gk-images-wrapper.gk-images-cols5 > div:nth-child(2n+1),
.gk-product-gallery .gk-images-wrapper.gk-images-cols6 > div:nth-child(2n+1),
.gk-product-gallery .gk-images-wrapper.gk-images-cols7 > div:nth-child(2n+1),
.gk-product-gallery .gk-images-wrapper.gk-images-cols8 > div:nth-child(2n+1) {
   clear: both;
}

To fix second issue, find Storebox/css/stuff.css file and replace this fragment (lines 411-418) with this one:

Code: Select all

/* YouTube, Vimeo - responsive support */
.content iframe[src^='http://www.youtube.com'],
.content iframe[src^='https://www.youtube.com'],
.content iframe[src^='http://youtube.com'],
.content iframe[src^='https://youtube.com'],
.content iframe[src*='vimeo.com'] {
   max-width: 100%!important;
}

Then, check again and please let me know, we will add these features to the next theme update.
regards..

Thanks for looking at this.

#1: gk-product-gallery mod worked great - FIXED

#2: Vimeo/You-Tube mod did not change anything on my phone. Looks the same as with the original code

Also, notice one more thing.

#3: Search Box is displaying behind home page logo: http://dev.templeofwhomp.com

I have tested these movies on Iphone (on real device and a simulator - iOS 5.1) and looks ok.

On android you're right, movie is cropped but fullscreen is not accessable. But it's iframe, so we are moved to a vimeo server and unfortunately on android, fullscreen button is not accessable ( try another sites with vimeo movie - there's the same problem on android).

To fix your homepage logo (your image is much higher than the original one), edit Storebox/css/tablet.small.css file, find selector #gk-search (line 126) and add property:

Code: Select all

padding-top: 90px;

regards..

Thanks for the Vimeo update and the logo fix. Much appreciated.