Jump to content

Isotope changing grid-item sizes

Recommended Posts

I have added isotope to the website and it seems to sort items fine. However it has resized all of the shop items and the shop page now looks terrible! Any tips how to make the grid items all the correct size again? I have tried setting custom css on .grid-item but it did not make the image scale back to the correct size. I have also tried some isotop settings but to no avail.

I have removed isotope for now.

This is what it looks like with isotope:

image.thumb.png.8fa4ce5cc0bbcff2f68f392c7dca4c71.png

 

This is the code I added to the shop page to initialise isotope (the actual sorting script is left out for simplicity:

//Isotope integration into Es site.Try 2
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<script>
    var elem;
    var iso;
    window.onload = function(){
        elem = document.querySelector('.list-grid');
        iso = new Isotope( elem, {
        //options
        percentPosition: true,
        itemSelector: '.grid-item',
        layoutMode: 'fitRows',
        containerStyle: null,
        resize: false,
        fitRows: {
            equalheight: true,
            gutter: 30
        },
        getSortData: {
          name: '.grid-title',
          price: '.product-price'
        }
    });
  }

</script>

 

Link to comment
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.