Solution for fixed constraint on mobile devices when using fullscreen background images

Question

I just finished building my Shopify theme from scratch. It is my first responsive design, and I am very happy with everything expect for one major problem.

On our product page, we use a fullscreen image gallery from galleria.io as our background to display our product images. On a desktop it is a very nice experience.

View on mobile device: http://finegra.in/products/bowden

However, on mobile devices, the background images makes the page have a fixed constraint, meaning that any content that doesn't make it on the viewport is impossible to scroll down an view.

Basically, I'm trying to figure out how to break out of the fixed constraint while still keeping the fullscreen background images.

Actually, I would be fine with launching the fullscreen gallery overtop of the content on mobile devices instead of it serving as the background.

Any help with this would be greatly appreciated.

Here is the HTML for the fullscreen background gallery:

<div id="galleria">
    <div class="galleria-container notouch fullscreen" style="width: 100%; height: 100%;">
        <div class="galleria-stage">
            <div class="galleria-images" style="position: relative; top: 0px; left: 0px; width: 100%; height: 100%;">
                <div class="galleria-image" style="overflow: hidden; position: absolute; top: 0px; left: 0px; transition: none 0s ease 0s ; opacity: 0; z-index: 0;">
                    <div class="galleria-layer" style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2;"></div>
                </div>
                <div class="galleria-image" style="overflow: hidden; position: absolute; top: 0px; left: 0px; opacity: 1; width: 1663px; height: 960px; transition: none 0s ease 0s ; z-index: 1;">
                    <div class="galleria-layer" style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2; display: none;"></div>
                    <img width="1663" height="1108" style="display: block; opacity: 1; min-width: 0px; min-height: 0px; max-width: none; max-height: none; width: 1663px; height: 1108px; position: absolute; top: -74px; left: 0px;" src="http://cdn.shopify.com/s/files/1/0207/2640/products/MG_9400_1024x1024.jpeg?156">
                </div>
            </div>
            <div class="galleria-loader" style="opacity: 1; display: none;"></div>
            <div class="galleria-counter" style="opacity: 1;">
                <span class="galleria-current">1</span>
                /
                <span class="galleria-total">10</span>
            </div>
            <div class="galleria-image-nav">
                <div class="galleria-image-nav-right" style="opacity: 0.5; display: block;"></div>
                <div class="galleria-image-nav-left" style="opacity: 0.5; display: block;"></div>
            </div>
        </div>
        <div class="galleria-thumbnails-container" style="top: 884px; opacity: 1;">
            <div class="galleria-thumb-nav-left disabled"></div>
            <div class="galleria-thumbnails-list" style="overflow: hidden; position: relative;">
                <div class="galleria-thumbnails" style="overflow: hidden; position: relative; width: 180px; height: 10px; left: 0px;">
                    <div class="galleria-image active">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                </div>
            </div>
            <div class="galleria-thumb-nav-right disabled"></div>
            <div class="galleria-thumbnails-tab" style="visibility: hidden;"></div>
        </div>
        <div class="galleria-info" style="position: absolute; left: -10000px; display: block; opacity: 1;">
            <div class="galleria-info-text" style="width: 1623px;">
                <div class="galleria-info-title" style="display: none;"></div>
                <div class="galleria-info-description">BOWDEN</div>
            </div>
        </div>
        <div class="galleria-tooltip" style="opacity: 0;"></div>
    </div>
</div>
</div>

Here is the CSS for it:

#galleria {
    background: none repeat scroll 0 0 #FFFFFF;
    position: relative;
    z-index: 1;
}

.galleria-container {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
}
.galleria-container {
    background: none repeat scroll 0 0 #FFFFFF;
}
.galleria-container, .galleria-stage, .galleria-images, .galleria-image img, .galleria-image-nav, .galleria-image-nav-left, .galleria-image-nav-right, .galleria-thumbnails-container, .galleria-info, .galleria-tooltip {
    margin: 0;
    padding: 0;
}

.galleria-stage {
    height: 100%;
    position: absolute;
    width: 100%;
}

.galleria-thumbnails-container {
    bottom: 0;
    padding-top: 16px;
    position: absolute;
    width: 100%;
    z-index: 2;
}

Answer 1

Option 1

if you want to show the gallery as a content-block (not in background) on mobile devices, you can load extra CSS depending on screen width with media queries. You have to overwrite some position: absolute in this extra-file to get your blocks back in flow.

like:

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="/mobile.css" />

or overwrite it in the existing css file:

@media all and (max-width: 1024px) {
    .galleria-container {
        position: relative;
    }

    /* and a lot more CSS ;-) */
}

Option 2

to have scrollbars with your existing layout, you anyway have to replace some position: absolute and float: left|right, to get your content back in flow and extend the height of parent div-elements:

html {
        overflow: auto !important;
}

body {
        overflow: visible !important;
}

#info {
    position: relative;
    float: none;
}

#product-details {
    position: relative;     
}

I tested this setup. Scrollbars are visible now on iPad/iPhone and IE9+. But you have to adapt the margins and offsets, because I had to change position values

See http://stephan.mestrona.net/finegra.in/products/bowden.html