Use one gallery style for desktop, a different one for mobile

On 2/21/2024 at 12:53 AM, ClutchMedia said:

Hello I have a Slideshow Reel on my "Clutch Media" page. I need the height on desktop to be 99 but the height on mobile to be 35. This ensure the photos don't get cut off. My page link is https://www.vclutch.com/clutchmedia . I need CSS for the slideshow reel on the page please. Thanks for the help in advance!

To change height on desktop, use this CSS code

@media screen and (min-width:992px) {
body#collection-61ca17e4faa6734f646c5b87 .gallery-reel {
    height: 99vh !important;
}
}

Hello @tuanphan I am having a similar issue to others. I have grid: simple setup 1 column setup for mobile purposes (currently only set to my "portraits" page) and I have slideshow: reel setup for other pages but I want all my desktop pages to be slideshow reel and all my mobile to be grid simple 1 column.

my website is: www.babsyshots.com

6 minutes ago, Babsy said:

Hello @tuanphan I am having a similar issue to others. I have grid: simple setup 1 column setup for mobile purposes (currently only set to my "portraits" page) and I have slideshow: reel setup for other pages but I want all my desktop pages to be slideshow reel and all my mobile to be grid simple 1 column.

my website is: www.babsyshots.com

@tuanphan I actually changed my mobile to grind masonry.

Hi @tuanphan! I want to use Masonry Gallery on both mobile and desktop but want desktop to have 2 columns and mobile to have 1. Is that possible? My website is miabain.design, pw is "Frizzle". I would want this feature for all the pages: https://www.miabain.design/ponder, https://www.miabain.design/mnmlst, etc. TIA!!

On 4/3/2024 at 12:08 AM, miabain1 said:

Hi @tuanphan! I want to use Masonry Gallery on both mobile and desktop but want desktop to have 2 columns and mobile to have 1. Is that possible? My website is miabain.design, pw is "Frizzle". I would want this feature for all the pages: https://www.miabain.design/ponder, https://www.miabain.design/mnmlst, etc. TIA!!

You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(1,1fr) !important;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: 100% !important;
}
    figure.gallery-masonry-item img {
        width: 100% !important;
    }
}