How to make a different gallery size on mobile and desktop view

Hello! Similar issue as some of the previous members. I have a Gallery Block on the homepage that fills up the full height on a desktop but not on a mobile phone or iPad (when turned vertically). And I'm not having any luck with the codes above, unfortunately. 

https://www.studiosheso.com/

Thanks in advance!

Hey @tuanphan!

I'm trying to do something similar for this website.... www.chowstable.com.au

We just want the desktop version of the homepage gallery (at the top) to appear on mobile otherwise the writing gets cut off. It's version 7.0

On 8/9/2024 at 5:02 PM, creativenap said:

Hello! Similar issue as some of the previous members. I have a Gallery Block on the homepage that fills up the full height on a desktop but not on a mobile phone or iPad (when turned vertically). And I'm not having any luck with the codes above, unfortunately. 

https://www.studiosheso.com/

Thanks in advance!

 

You can add this under your current code for vertically mode

@media screen and (max-width: 1024px) and (orientation:landscape) {
    body.homepage .sqs-gallery-design-strip .sqs-wrapper,body.homepage .sqs-gallery-design-strip-slide,body.homepage .sqs-gallery-design-strip {
        height:150vh !important
    }

    body.homepage .sqs-gallery-controls.show-hover-effect>a {
        top: 75vh;
    }
}

On 8/29/2024 at 6:40 AM, kirstie.pallier said:

Hey @tuanphan!

I'm trying to do something similar for this website.... www.chowstable.com.au

We just want the desktop version of the homepage gallery (at the top) to appear on mobile otherwise the writing gets cut off. It's version 7.0

I think I sent via email

@media screen and (max-width: 640px) {
    section#new-gallery img {
        width:100% !important;
        height: auto !important;
        left: 0 !important
    }

    section#new-gallery {
        height: 200px !important
    }
}

Hello! 
I have been having a similar issue. I have Grid: Masonry type of gallery and would like my layout to include 2 columns on the computer, but 1 column on the mobile. It looks too cramped with 2 columns on the mobile with photo descriptions, yet too big with 1 column on the computer. 
Thank you!

Hi @tuanphan it seems you're the best guy here to ask, so I'd appreciate if you could help out!

How would I go about reducing the size of Grid: Masonry on PC only? I'd like it if the images were a full bleed on mobile but padded greatly on PC so the grid images don't fill up the whole screen (aka just shrunk images on PC, not cropped). This is for a webcomic, so it'd also be great to have just one block of CSS code that works for multiple pages using Grid: Masonry. I don't plan on having any other Grid: Masonry blocks on the website at all in the future except for comic pages.

Page in particular:
https://www.macemania.com/chapter-1
section[data-section-id="66f764523269542e5224a6e2"]

Thank you so much for helping everyone on this forum! 🙂 I appreciate your time greatly.

On 9/28/2024 at 9:45 AM, BrennenSpeal said:

Hi @tuanphan it seems you're the best guy here to ask, so I'd appreciate if you could help out!

How would I go about reducing the size of Grid: Masonry on PC only? I'd like it if the images were a full bleed on mobile but padded greatly on PC so the grid images don't fill up the whole screen (aka just shrunk images on PC, not cropped). This is for a webcomic, so it'd also be great to have just one block of CSS code that works for multiple pages using Grid: Masonry. I don't plan on having any other Grid: Masonry blocks on the website at all in the future except for comic pages.

Page in particular:
https://www.macemania.com/chapter-1
section[data-section-id="66f764523269542e5224a6e2"]

Thank you so much for helping everyone on this forum! 🙂 I appreciate your time greatly.

You can use this to Website Tools > Custom CSS

@media screen and (max-width:991px) {
.gallery-masonry {
    max-width: 95% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}
}

I'm having a similar issue with my shop images when you click on a specific products. On desktop everything works fine but on mobile any wider picture of a bench cuts off the sides. really need to make them smaller so you can see the full image. please help! not very good with technology.

url is www.legards.co.uk

On 10/6/2024 at 3:44 AM, Legards said:

I'm having a similar issue with my shop images when you click on a specific products. On desktop everything works fine but on mobile any wider picture of a bench cuts off the sides. really need to make them smaller so you can see the full image. please help! not very good with technology.

url is www.legards.co.uk

Use CSS code like this to Website Tools > Custom CSS.

@media screen and (max-width: 767px) {
    img.ProductItem-gallery-slides-item-image {
        object-fit:contain !important
    }
}