Databases
StackOverflow2013
Postsdbo
POSolution for fixed constraint on mobile devices when using fullscreen background images
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSolution for fixed constraint on mobile devices when using fullscreen background images
    text
    copied!<p>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. </p> <p>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. </p> <p>View on mobile device: <a href="http://finegra.in/products/bowden" rel="nofollow">http://finegra.in/products/bowden</a></p> <p>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. </p> <p>Basically, I'm trying to figure out how to break out of the fixed constraint while still keeping the fullscreen background images. </p> <p>Actually, I would be fine with launching the fullscreen gallery overtop of the content on mobile devices instead of it serving as the background.</p> <p>Any help with this would be greatly appreciated.</p> <p>Here is the HTML for the fullscreen background gallery:</p> <pre><code>&lt;div id="galleria"&gt; &lt;div class="galleria-container notouch fullscreen" style="width: 100%; height: 100%;"&gt; &lt;div class="galleria-stage"&gt; &lt;div class="galleria-images" style="position: relative; top: 0px; left: 0px; width: 100%; height: 100%;"&gt; &lt;div class="galleria-image" style="overflow: hidden; position: absolute; top: 0px; left: 0px; transition: none 0s ease 0s ; opacity: 0; z-index: 0;"&gt; &lt;div class="galleria-layer" style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;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;"&gt; &lt;div class="galleria-layer" style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2; display: none;"&gt;&lt;/div&gt; &lt;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"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="galleria-loader" style="opacity: 1; display: none;"&gt;&lt;/div&gt; &lt;div class="galleria-counter" style="opacity: 1;"&gt; &lt;span class="galleria-current"&gt;1&lt;/span&gt; / &lt;span class="galleria-total"&gt;10&lt;/span&gt; &lt;/div&gt; &lt;div class="galleria-image-nav"&gt; &lt;div class="galleria-image-nav-right" style="opacity: 0.5; display: block;"&gt;&lt;/div&gt; &lt;div class="galleria-image-nav-left" style="opacity: 0.5; display: block;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="galleria-thumbnails-container" style="top: 884px; opacity: 1;"&gt; &lt;div class="galleria-thumb-nav-left disabled"&gt;&lt;/div&gt; &lt;div class="galleria-thumbnails-list" style="overflow: hidden; position: relative;"&gt; &lt;div class="galleria-thumbnails" style="overflow: hidden; position: relative; width: 180px; height: 10px; left: 0px;"&gt; &lt;div class="galleria-image active"&gt; &lt;span class="img" style="opacity: 1;"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="galleria-image"&gt; &lt;span class="img" style="opacity: 1;"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="galleria-image"&gt; &lt;span class="img" style="opacity: 1;"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="galleria-image"&gt; &lt;span class="img" style="opacity: 1;"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="galleria-image"&gt; &lt;span class="img" style="opacity: 1;"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="galleria-image"&gt; &lt;span class="img" style="opacity: 1;"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="galleria-image"&gt; &lt;span class="img" style="opacity: 1;"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="galleria-image"&gt; &lt;span class="img" style="opacity: 1;"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="galleria-image"&gt; &lt;span class="img" style="opacity: 1;"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="galleria-image"&gt; &lt;span class="img" style="opacity: 1;"&gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="galleria-thumb-nav-right disabled"&gt;&lt;/div&gt; &lt;div class="galleria-thumbnails-tab" style="visibility: hidden;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="galleria-info" style="position: absolute; left: -10000px; display: block; opacity: 1;"&gt; &lt;div class="galleria-info-text" style="width: 1623px;"&gt; &lt;div class="galleria-info-title" style="display: none;"&gt;&lt;/div&gt; &lt;div class="galleria-info-description"&gt;BOWDEN&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="galleria-tooltip" style="opacity: 0;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Here is the CSS for it:</p> <pre><code>#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; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload