Help with Slideshow Gallery for mobile

21 hours ago, AFKSTue said:

This code does almost exactly what I need. I like that I can adjust the height on the mobile screen. The only problem is, the resized image is centered. But I would like the image on the left not to be cut off. It should be left aligned instead.

(The fading is part of the original banner image).

Like so:

Link to the page: copper-minnow-p73t.squarespace.com

Password: hello

You can adjust 20%

<style>
  @media screen and (max-width:767px) {
    .gallery-fullscreen-slideshow {
    	height: 35vh !important;
    }
  .gallery-fullscreen-slideshow img {
    object-position: 20% 50% !important;
  }
  }
</style>

Thank you very much!

Hi @tuanphan,

I am trying to reduce the size of the images (height and width) on mobile without keeping the same proportion and without leaving the blank margins. Tried all codes. Can you please help?

https://seadragon-gold-ge8l.squarespace.com/contact 

Password sfera

12 hours ago, Leticia said:

Hi @tuanphan,

I am trying to reduce the size of the images (height and width) on mobile without keeping the same proportion and without leaving the blank margins. Tried all codes. Can you please help?

https://seadragon-gold-ge8l.squarespace.com/contact 

Password sfera

You can add this to Custom CSS

@media screen and (max-width:767px) {
[data-section-id="658f038b85f1351316be12fe"] .gallery-reel {
    height: 10vh !important;
}
}

On 1/1/2024 at 3:25 AM, tuanphan said:

You can add this to Custom CSS

@media screen and (max-width:767px) {
[data-section-id="658f038b85f1351316be12fe"] .gallery-reel {
    height: 10vh !important;
}
}

 

Thanks a lot! Can I also ask if it is possible to leave the top menu bar transparent on the start page and solid white on the other pages?

12 hours ago, Leticia said:

Thanks a lot! Can I also ask if it is possible to leave the top menu bar transparent on the start page and solid white on the other pages?

Start page, you mean this page? https://seadragon-gold-ge8l.squarespace.com/?noredirect

Use this CSS code

body.homepage header#header {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}