Jump to content

Product images slide on MOBILE view how to take feature off - should be stacked only.

Go to solution Solved by JayVanDyke,

Recommended Posts

Hello, 

website link: www.alifelessordinary.store 

Product page example: https://www.alifelessordinary.store/shop/p/murano-swirl-lamp

On the desktop version of my site the images are stacked on the product pages however on the MOBILE VERSION of my site the images are also stacked which is what I want, but they also have a slide feature which I would like to remove as when you slide the image, a blank image follows as the images are already stacked. They load correctly but if you use the slide feature it becomes messy and confusing. If somebody could please help, it would be most appreciated! 

i currently have the following code added in: 

@media screen and (max-width:767px) {
.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
}
@media screen and (max-width:767px) {
.ProductItem-gallery-slides-item {
    position: static !important;
    height: auto !important;
    visibility: visible !important;
}
img.ProductItem-gallery-slides-item-image {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
}
@media screen and (max-width:767px) {
.tweak-product-basic-item-gallery-aspect-ratio-34-three-four-vertical .ProductItem-gallery-slides:before {
    display: none;
}
}@media screen and (max-width:767px) {
.ProductItem-gallery-current-slide-indicator.enable-on-first-image-load.enabled {
    display: none;
}
}@media screen and (max-width:767px) {
img.ProductItem-gallery-slides-item-image, .ProductItem-gallery-slides-item {
    pointer-events: none !important;
}
}
.sold-out .sqs-money-native { display:none; }
.view-item .sold-out .sqs-money-native { display:block; }
// Hide Price when product is out of stock
/* Hide sold out price */
.sold-out .product-price {
    display: none;
}
// Hide Add to Cart button when product is out of stock
.sold-out .ProductItem-details .sqs-add-to-cart-button {
  display: none;
}

 

and the following java code: 

 

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
  var sfCustomBadgeTag = 'on-hold';   
  var sfCustomBadgeLabel = 'ON HOLD'; 
  var _0x270b=['\x3c\x64\x69\x76\x20\x63\x6c\x61\x73\x73\x3d\x22\x70\x72\x6f\x64\x75\x63\x74\x2d\x6d\x61\x72\x6b\x20\x73\x66\x2d','\x61\x64\x64\x45\x76\x65\x6e\x74\x4c\x69\x73\x74\x65\x6e\x65\x72','\x61\x70\x70\x65\x6e\x64','\x61\x70\x70\x6c\x79','\x63\x6f\x6e\x73\x74\x72\x75\x63\x74\x6f\x72','\x54\x68\x69\x73\x20\x73\x69\x74\x65\x20\x69\x73\x20\x75\x73\x69\x6e\x67\x20\x63\x6f\x70\x79\x72\x69\x67\x68\x74\x65\x64\x20\x63\x6f\x64\x65\x20\x64\x65\x76\x65\x6c\x6f\x70\x65\x64\x20\x62\x79\x20\x53\x6f\x75\x6e\x64\x66\x6f\x63\x75\x73\x20\x44\x69\x67\x69\x74\x61\x6c\x20\x4d\x65\x64\x69\x61\x20\x5b\x77\x77\x77\x2e\x73\x66\x2e\x64\x69\x67\x69\x74\x61\x6c\x5d','\x6c\x6f\x67','\x3c\x2f\x64\x69\x76\x3e','\x74\x65\x73\x74','\x5e\x28\x5b\x5e\x20\x5d\x2b\x28\x20\x2b\x5b\x5e\x20\x5d\x2b\x29\x2b\x29\x2b\x5b\x5e\x20\x5d\x7d','\x44\x4f\x4d\x43\x6f\x6e\x74\x65\x6e\x74\x4c\x6f\x61\x64\x65\x64','\x2e\x67\x72\x69\x64\x2d\x69\x74\x65\x6d\x2e\x74\x61\x67\x2d'];(function(_0x233302,_0x270b06){var _0x3c6595=function(_0x5ebef9){while(--_0x5ebef9){_0x233302['\x70\x75\x73\x68'](_0x233302['\x73\x68\x69\x66\x74']());}},_0x4c95f3=function(){var _0x2d5030={'\x64\x61\x74\x61':{'\x6b\x65\x79':'\x63\x6f\x6f\x6b\x69\x65','\x76\x61\x6c\x75\x65':'\x74\x69\x6d\x65\x6f\x75\x74'},'\x73\x65\x74\x43\x6f\x6f\x6b\x69\x65':function(_0x47a4e7,_0x88df,_0x1aaf74,_0xff8795){_0xff8795=_0xff8795||{};var _0x2b99df=_0x88df+'\x3d'+_0x1aaf74,_0x2bbc6a=0x0;for(var _0xad5c32=0x0,_0x3c4760=_0x47a4e7['\x6c\x65\x6e\x67\x74\x68'];_0xad5c32<_0x3c4760;_0xad5c32++){var _0x373fd2=_0x47a4e7[_0xad5c32];_0x2b99df+='\x3b\x20'+_0x373fd2;var _0x3aafe5=_0x47a4e7[_0x373fd2];_0x47a4e7['\x70\x75\x73\x68'](_0x3aafe5),_0x3c4760=_0x47a4e7['\x6c\x65\x6e\x67\x74\x68'],_0x3aafe5!==!![]&&(_0x2b99df+='\x3d'+_0x3aafe5);}_0xff8795['\x63\x6f\x6f\x6b\x69\x65']=_0x2b99df;},'\x72\x65\x6d\x6f\x76\x65\x43\x6f\x6f\x6b\x69\x65':function(){return'\x64\x65\x76';},'\x67\x65\x74\x43\x6f\x6f\x6b\x69\x65':function(_0x57b1db,_0x4c8370){_0x57b1db=_0x57b1db||function(_0x17d2db){return _0x17d2db;};var _0x193b36=_0x57b1db(new RegExp('\x28\x3f\x3a\x5e\x7c\x3b\x20\x29'+_0x4c8370['\x72\x65\x70\x6c\x61\x63\x65'](/([.$?*|{}()[]\/+^])/g,'\x24\x31')+'\x3d\x28\x5b\x5e\x3b\x5d\x2a\x29')),_0x187855=function(_0x2e2855,_0x448a18){_0x2e2855(++_0x448a18);};return _0x187855(_0x3c6595,_0x270b06),_0x193b36?decodeURIComponent(_0x193b36[0x1]):undefined;}},_0x57aff3=function(){var _0x5dfa80=new RegExp('\x5c\x77\x2b\x20\x2a\x5c\x28\x5c\x29\x20\x2a\x7b\x5c\x77\x2b\x20\x2a\x5b\x27\x7c\x22\x5d\x2e\x2b\x5b\x27\x7c\x22\x5d\x3b\x3f\x20\x2a\x7d');return _0x5dfa80['\x74\x65\x73\x74'](_0x2d5030['\x72\x65\x6d\x6f\x76\x65\x43\x6f\x6f\x6b\x69\x65']['\x74\x6f\x53\x74\x72\x69\x6e\x67']());};_0x2d5030['\x75\x70\x64\x61\x74\x65\x43\x6f\x6f\x6b\x69\x65']=_0x57aff3;var _0x392d01='';var _0xc88d02=_0x2d5030['\x75\x70\x64\x61\x74\x65\x43\x6f\x6f\x6b\x69\x65']();if(!_0xc88d02)_0x2d5030['\x73\x65\x74\x43\x6f\x6f\x6b\x69\x65'](['\x2a'],'\x63\x6f\x75\x6e\x74\x65\x72',0x1);else _0xc88d02?_0x392d01=_0x2d5030['\x67\x65\x74\x43\x6f\x6f\x6b\x69\x65'](null,'\x63\x6f\x75\x6e\x74\x65\x72'):_0x2d5030['\x72\x65\x6d\x6f\x76\x65\x43\x6f\x6f\x6b\x69\x65']();};_0x4c95f3();}(_0x270b,0x115));var _0x3c65=function(_0x233302,_0x270b06){_0x233302=_0x233302-0x0;var _0x3c6595=_0x270b[_0x233302];return _0x3c6595;};var _0x38d544=_0x3c65,_0x2d5030=function(){var _0x392d01=!![];return function(_0xc88d02,_0x47a4e7){var _0x88df=_0x392d01?function(){var _0x384beb=_0x3c65;if(_0x47a4e7){var _0x1aaf74=_0x47a4e7[_0x384beb('\x30\x78\x32')](_0xc88d02,arguments);return _0x47a4e7=null,_0x1aaf74;}}:function(){};return _0x392d01=![],_0x88df;};}(),_0x5ebef9=_0x2d5030(this,function(){var _0xff8795=function(){var _0xeec078=_0x3c65,_0x2b99df=_0xff8795['\x63\x6f\x6e\x73\x74\x72\x75\x63\x74\x6f\x72']('\x72\x65\x74\x75\x72\x6e\x20\x2f\x22\x20\x2b\x20\x74\x68\x69\x73\x20\x2b\x20\x22\x2f')()[_0xeec078('\x30\x78\x33')](_0xeec078('\x30\x78\x38'));return!_0x2b99df[_0xeec078('\x30\x78\x37')](_0x5ebef9);};return _0xff8795();});_0x5ebef9(),window[_0x38d544('\x30\x78\x30')](_0x38d544('\x30\x78\x39'),_0x2bbc6a=>{var _0x337a9b=_0x38d544;console[_0x337a9b('\x30\x78\x35')](_0x337a9b('\x30\x78\x34'));var _0xad5c32=_0x337a9b('\x30\x78\x61')+sfCustomBadgeTag+'\x20\x2e\x67\x72\x69\x64\x2d\x6d\x61\x69\x6e\x2d\x6d\x65\x74\x61',_0x3c4760=_0x337a9b('\x30\x78\x62')+sfCustomBadgeTag+'\x22\x3e'+sfCustomBadgeLabel+_0x337a9b('\x30\x78\x36');$(_0xad5c32)['\x65\x61\x63\x68'](function(){var _0x42c01e=_0x337a9b;$(this)[_0x42c01e('\x30\x78\x31')](_0x3c4760);});});
</script>

 

Thank you!

best wishes,

Emma

Link to comment
  • Solution

@alifelessordinary Try this.

@media only screen and (max-width: 767px) {
  .ProductItem-gallery {
    .ProductItem-gallery-slides {
      pointer-events: none !important; //stops the interaction that moves the slides
    }
    .ProductItem-gallery-slides-item {
      transform: translate(0,0) !important; //makes sure they don't move over
    }
  }

}

It does seem to only show the ones that are upcoming since it's setup for that sliding gallery so if you want to fix that for mobile add this like to the slides item element too or just copy and paste this below the current code.

 

@media only screen and (max-width: 767px) {
  .ProductItem-gallery {

    .ProductItem-gallery-slides-item {
      display: block !important;
    }
  }

}

 

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

 🛠️ Web Designer's Toolkit

**some of these contain affiliate links

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.