can you edit the home page gallery on the desktop to appear differently on the mobile interface?

Hello! I was wondering if anyone had any advice about how you go about having a full bleed gallery on the desktop view and edited resized version on the mobile interface?

My website is looking good desktop form but not so great on a phone (i have attached some images to show what i mean)

Right now I understand all the changes to images/galleries seem global on the site but wondered if anyone had tips on how to differ the layout?

I am currently on a 7.0 template but looking to upgrade to 7.1 but wondered if there is a way to solve this problem there?

Any advise and tips would be very much appreciated!

Hi,

If you share link to page where you have problem, we can give some code to resize gallery on mobile

Hi Tuanphan- omg that would be amazing! the webpage is this one: http://www.riffy.com/

My template is currently 7.0 but looking to move to 7.1, is there a way to code this that works on both?

Thanks so much!

On 6/4/2023 at 5:47 PM, Riffy said:

Hi Tuanphan- omg that would be amazing! the webpage is this one: http://www.riffy.com/

My template is currently 7.0 but looking to move to 7.1, is there a way to code this that works on both?

Thanks so much!

Hi,

If resize it on mobile, it will create gray gap under slideshow. Do you still want to continue?

Hi Tuanphan

Thanks for getting back to me! Hmmm this wouldn't be ideal- is there a way to make the gallery appear in stripes where they photos are in blocks going down? or does that mess with the main desktop interface as well? Super grateful for trying this out!

If resize in mobile, gap will appear, or you can consider another approach is move image to left or right a bit on mobile to make image a bit better. If you want this, I can give the code

yes that would be great! thank you

Use this CSS code

@media screen and (max-width:640px) {
#fullscreenBrowser .slideshow .slide img {
    left: -100px !important;
}
}