title: Woocommerce Storefront - Sticky Product Page Gallery
body: <p>I'm using Storefront, a 'Woo' theme for Woocommerce. I've attempted to make the image gallery 'sticky'. Currently only contains 1 item. My plan was to make this item scroll down along side the product page description / add-to-cart section which on my site is quite complex and long.</p>
  
  <p>My site isn't live at the moment, so here's the Storefront Demo:
  <a href="https://themes.woocommerce.com/storefront/product/lowepro-slingshot-edge-250-aw/" rel="nofollow noreferrer">https://themes.woocommerce.com/storefront/product/lowepro-slingshot-edge-250-aw/</a></p>
  
  <p>I've used the basic explanation of Sticky from here:
  <a href="https://www.w3schools.com/howto/howto_css_sticky_element.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_css_sticky_element.asp</a></p>
  
  <p>And tried applying that, logically I thought, like so</p>
  
  <pre><code>.woocommerce-product-gallery {
  position: sticky!important;
  top: 0!important;
  }
  </code></pre>
  
  <p>This doesn't do the trick, so I tried targeting various other elements:</p>
  
  <p>woocommerce-product-gallery__wrapper</p>
  
  <p>woocommerce-product-gallery__image</p>
  
  <p>Neither work. Perhaps the answer is extending the height of that gallery column, but I'd want to do this without disrupting the normal function of the Storefront gallery. Important if I should add multiple images at a later time.</p>
  
  <p>If anyone can see the obvious problem with Storefront and Sticky items do let me know. Thanks.</p>