misschaela

Thank you, I've added this code and now it changes to 5 columns but the images in the second and third column are slightly lower and I'm not sure how to fix this. Also when decreasing the window width and then increasing again the images aren't in the last two columns.

Hi, I have a masonry gallery and I wanted 4 columns on a standard laptop (MacBook), 5 columns on larger screens (iMac) and 1 column on mobile. I already found code on how to change the amount of columns to 1 on mobile and added another piece of code now for 5 columns but it's not working it keeps going from 4 to 1 column instead of 5 once the dimensions are greater than the amount set. I was wondering if anyone knows why this is occurring. Any help would be greatly appreciated. Michaela Here is the code I have added (SS are also below): /* Masonry 5 items*/ @media screen and (min-width:1920px) { .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; } figure.gallery-masonry-item { position: relative !important; width: 20% !important; transform: unset !important; } .gallery-masonry-item-wrapper { height: auto !important; } .gallery-masonry .gallery-masonry-item[data-loaded] img { width: 100% !important; } .gallery-masonry { padding-left: 1vw !important; padding-right: 1vw !important; } } /* Masonry one item on mobile */ @media screen and (max-width:640px) { .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; } figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } .gallery-masonry-item-wrapper { height: auto !important; } .gallery-masonry .gallery-masonry-item[data-loaded] img { width: 100% !important; } .gallery-masonry { padding-left: 1vw !important; padding-right: 1vw !important; } }

Site URL: https://www.misschaela.com/work Hi, When scrolling on a portfolio page which has the Grid: Simple layout, I found that the contents weren't loading until having scrolled down quite a bit. My sitewide animation is set to slide. I managed to find some code where I was able to remove the animation from the page however, I realised that on mobile devices this has effected the menu. The menu icon is now just a single line instead of two. I am in search for some help to fix this menu issue. Code added: body#collection-62be561888195b576821081f * { transform: unset !important; opacity: 1 !important; transition-delay: unset !important; transition: unset !important; } Any help would really be appreciated!