Image Show GK4 not responsive on mobile

We have quickstart installation of Storefront downloaded from your site today and installed today. We have the most recent update of Image Show GK4 I updated just today as well. We just want simple one page image so only using one slide and have text and pagination turned off.

http://www.ahgoobaby.com/Redesign

As you can see desktop on chrome looks good, but on mobile portrait and landscape, responsive is not looking good. How do i get mobile views (landscape and portrait) to show this image slide correctly. Possibly I need to adjust the image size?

Separately, is there a way to change the background to the "What our clients say" module from the current grey gradient to an actual image? If so, what should the ideal image dimensions be?

Since posting I've been working on it, so please disregard the above post in exchange for the following (which is where I'm at now).

You answered a separate post that there is a way to have a separate logo for small screens.

Is there a way to have use a smaller image for Image Show GK4 - JUST for PORTRAIT small screens? I think this will address the problem I'm having.

In small screens landscape the image works correctly responsively showing the entire image, but on PORTRAIT small screens, it simply crops the image leaving the left and right part out. Also, the text overlays in a different location proportionate to the background image in this regard.

So in addition to the smaller image option above for Image Show GK4, is there also a way to a) adjust the zoom / crop of the image when in PORTRAIT small screens, and/or b) adjust the location of where the text falls JUST when in PORTRAIT small screens.

Between the smaller image, defining the zoom / crop, and adjusting the location of where the text falls ONLY for portrait small screens, it will vastly improve the look. We have about 70% of customers viewing the site via mobile and most are phones, with most of the phones viewing in portrait mode, so getting that specific view is important.

Hi

Please try add this code to override.css:

Code: Select all

@media only screen and (max-width:767px) {
.gkIsWrapper-gk_storefront .gkIsSlide {
    background-size: 100% auto !important;
}

.gkIsWrapper-gk_storefront figcaption h2 {
    font-size: 12px;
    line-height: 12px;
    margin: 0 0 10px;
}

.gkIsWrapper-gk_storefront figcaption h3 {
    font-size: 15px;
    line-height: 36px;
}
}


Ok - I did it but am not sure what to do now. It is showing up in portrait mobile mode but it still isn't laying out nicely. Is there not a completely separate image I can reference? That way I can simply resize it correctly.

As well, I'm looking for the store text to appear first and then the image of the baby peeking through the hole underneath that. This works better in portrait mode whereas the landscape mode looks better as is with text to the left and baby peeking through the hole to the right. Let me know your thoughts after seeing how it currently looks after implementing the recommended code.

Hi

If You want to use a different image than remove my code and use this one instead:

Code: Select all

@media only screen and (max-width:767px) {
.gkIsWrapper-gk_storefront .gkIsSlide {
    background-size: auto 100% !important;
    background-imagr: url(path_to_new_image_goes_here);
}
}