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;
    }
}

Hello @tuanphan, I am also looking to use one image on desktop and another on mobile view for a fullscreen slideshow. I have my desktop image sized to:

.gallery-fullscreen-slideshow {
  max-width:1465px!important;
  margin: 0 auto;
}

This is because I want to have the slideshow be the length of the rest of the images on the page while keeping the proportions the way they are.

However, the mobile view cuts off the desktop image, which is not ideal. This makes me want to add a secondary image for mobile view. Is it possible to have two separate images with just css or will I need to add js?

On 6/20/2024 at 12:55 AM, nb1 said:

Hello @tuanphan, I am also looking to use one image on desktop and another on mobile view for a fullscreen slideshow. I have my desktop image sized to:

.gallery-fullscreen-slideshow {
  max-width:1465px!important;
  margin: 0 auto;
}

This is because I want to have the slideshow be the length of the rest of the images on the page while keeping the proportions the way they are.

However, the mobile view cuts off the desktop image, which is not ideal. This makes me want to add a secondary image for mobile view. Is it possible to have two separate images with just css or will I need to add js?

You can share site url, I think we can use CSS to resize slideshow on mobile. I just solved a case with List Slideshow a few hours ago.

@tuanphan I actually solved it another way. I duplicated the section, then added a desktop image to one section and a mobile image to the other, then I used CSS to hide the desktop section on mobile and hide the mobile section on desktop. It works and looks great!! Thank you for the reply tho!

@tuanphan I would like to have a grid-style gallery on desktop and a slideshow-style gallery on mobile. How can I do this? Site here (gallery at bottom of page): https://www.emilysiegfried.com/work/united-way

On 8/7/2024 at 7:09 AM, emilyksiegfried said:

@tuanphan I would like to have a grid-style gallery on desktop and a slideshow-style gallery on mobile. How can I do this? Site here (gallery at bottom of page): https://www.emilysiegfried.com/work/united-way

You mean this?