Slideshow display on iphone issue

I have just installed Music state quickstart. Having changed the site title from 'Music State' to 'Dangerous Times', on the iPhone the logo is obscured by the 'log in' button, the main slide does not correctly resize to the screen and is therefore obscured. - see screenshot.
Please advise.

Could You please post an url to your site?
The screenshot didn't attache.

Could You please post an url to your site?
The screenshot didn't attache.

The site URL is: http://dangeroustimes.net

Thanks Cyberek,

I've partially resolved the problem by changing the aspect ratio of the slides and turning off the Login button,

I've re-submitted the iPhone screenshot showing what it was like before [ slide dimensions 1200 x 560 pixels ]

photo(1).PNG

I'd prefer to use a slide that has an aspect ratio the same size as on the demo site - 1200 x 560 pixels, currently I'm using 1200 x 750, which resolves the problem on the iPhone, but is less than ideal on the site.

Any ideas? Seems odd that the slideshow won't resize appropriately when using slides that are the same dimensions as those on the demo site.

The same problem can be seen on our demo server - it seems like browsers below some screen width don't resize backgrounds in cover mode properly.
I'll talk with our dev team but I can't see any way to fix that, as this is a browser behave.

With the header and login/out button - I would suggest to change font size of the logo on smaller screens so it fits fine, or to use smaller text in 2 rows.

Ok, one of our devs found a solution,
Please edit: /templates/gk_musicstate/css/override.css and add at its end:

Code: Select all

@media (max-width: 620px) {
    .gk-is-wrapper-gk_musicstate {min-height: auto; min-height: initial; }
}


Remember to enable "CSS override" in template settings - advanced section.

excellent, thanks Cyberek -almost there - header crops off the top of slide no though:

dt_screen_shot.png

any suggestions welcome

Hi Cyberek, thanks, however the code your dev suggested isn't yet a solution - please see the image I posted below, the top of the slides are now obscured by the top banner, please could you suggest appropriate css to get this template to work on the iPhone correctly? Its not a customisation, I've made no changes to the quickstart code other than those you've suggested, I'm really could do with some help in getting the template to work as it should do on multiple devices.

solution is to add the following to the overide:

#gk-head.gk-no-menu {
padding-top: 79px;
}

You were able to solve it before I got chance to look into .
Is there anything else I can help you with on this topic?