alifelessordinary Posted July 5 Share Posted July 5 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 JayVanDyke Posted July 5 Solution Share Posted July 5 @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; } } } tuanphan 1 ☕ 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
alifelessordinary Posted July 7 Author Share Posted July 7 Thank you so much! It worked! Appreciate your help. One last niggle would be is it possible to remove the arrows? Once again thank you very much! Best wishes, Emma Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment