css Change Page Banner height in Mobile View - smaller

Site URL: https://grey-sapphire-9lfk.squarespace.com

I thought this was going to be easier than it's turning out to be...

On the desktop and tablet view - the banner image is a good height and the content fits well and works. 

However, on the mobile view, the banner is essentially the same height and therefore cuts a significant amount of the picture out. What I'm wanting is for the mobile view to respond and display at a height that is similar to the site in desktop view. 

Please see below for current desktop and mobile view and *desired* mobile view.

@tuanphan

Desktop view:

Current Mobile view:

*DESIRED* mobile view:

Password for site: summary

Thank you! 

Can you share link to page in screenshot?

20 minutes ago, tuanphan said:

Can you share link to page in screenshot?

Hey @tuanphan, thank you. Page url is: https://grey-sapphire-9lfk.squarespace.com/quotes-assessment

2 hours ago, tuanphan said:

Can you share link to page in screenshot?

Message me when you get a chance, @tuanphan - I have changed the password temporarily. Stay safe.

1 hour ago, Creativore said:

Message me when you get a chance, @tuanphan - I have changed the password temporarily. Stay safe.

What is password?

41 minutes ago, tuanphan said:

What is password?

Password: thankstuanphan

10 hours ago, tuanphan said:

What is password?

Commenting to bump post.

13 hours ago, tuanphan said:

Try adding to Home  > Design > Custom CSS

@media screen and (max-width:640px) {
	body#collection-5e8ac321776c472b726bea8f {
      figure.Intro-image.loaded img {
          width: 100% !important;
          left: 0 !important;
          top: 0 !important;
          height: auto !important;
      }
      section.Intro.Intro--has-image .spacer-block {
          display: none;
      }
  }
}

 

Thank you @tuanphan! That works great for that page! Thank you. To apply it across the whole site, how would I add the extra collection id's to the code?

Thank you so much! You are a champ.

@tuanphan Thank you so much! I amended the code to this:

@media screen and (max-width:640px) { 
      figure.Intro-image.loaded img { 
          width: 100% !important;
          left: 0 !important;
          top: 0 !important;
          height: auto !important;
      }
      section.Intro.Intro--has-image .spacer-block {
          display: none;
      }
  }

17 hours ago, tuanphan said:

Try adding to Home  > Design > Custom CSS

@media screen and (max-width:640px) {
	body#collection-5e8ac321776c472b726bea8f {
      figure.Intro-image.loaded img {
          width: 100% !important;
          left: 0 !important;
          top: 0 !important;
          height: auto !important;
      }
      section.Intro.Intro--has-image .spacer-block {
          display: none;
      }
  }
}

 

Hey @tuanphan,

I'm trying to do the same thing on the Home page and I can't get rid of the spaces... This is the code I wrote, can you see what I'm doing wrong with this?

@media screen and (max-width:640px) { 
      figure.Index-gallery-item-image img { 
          width: 100% !important;
          left: 0 !important;
          top: 0 !important;
          height: auto !important;
      }
      section#project-gallery.Index-gallery.loaded.sqs-frontend-overlay-editor-widget-host .spacer-block {
          display: none !important;
      }
  }

I'm having this same issue with making all the banner images on my site smaller when viewed on mobile. I'd like them to be 75% of the current height. I tried the above but it wasn't working for me...'

https://prism-octagon-5k9s.squarespace.com/

pw: krysta

thanks!

Hi @tuanphan can you also help with this on our website? The URL is justineapple.squarespace.com/home-new.

We added a slideshow banner but we need the banner on mobile to be the same rectangle size as how it is on desktop view.

Thank you!

Could anyone help me to make the top banner of my home page taller with custom css? Thank you!

On 11/13/2021 at 3:35 AM, SSong said:

Could anyone help me to make the top banner of my home page taller with custom css? Thank you!

Desktop only or all devices?

On 11/14/2021 at 8:57 AM, tuanphan said:

Desktop only or all devices?

just on mobile, thank you!

On 11/16/2021 at 10:40 PM, SSong said:

just on mobile, thank you!

Add to Design > Custom CSS

@media screen and (max-width:640px) {
section#hero-image-1 {
    min-height: 90vh !important;
}
}

On 11/17/2021 at 11:58 PM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:640px) {
section#hero-image-1 {
    min-height: 90vh !important;
}
}

 

THANK YOU!!!

@tuanphan can you please help me do this on my 7.1 site? 

thebartenders.squarespace.com

PW: RosePetalMartini

On 9/12/2022 at 4:09 PM, ambermadden03 said:

@tuanphan can you please help me do this on my 7.1 site? 

thebartenders.squarespace.com

PW: RosePetalMartini

Hi,

Add to Design > Custom CSS

/* resize mobile slideshow */
@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 30vh !important;
}
}