Squarespace 7.1 - Mobile Hero Banner Image Height

Site URL: https://www.mcbride-architects.com/all-projects/berkshires-modern

I wanted to see if there was a way to resize the hero banner image on mobile. The current mobile view has the default sizing of the banner image, but the client is looking to have it fit more horizontal like it does on desktop. Essentially I'd like it to crop more off the top/bottom than from the left/right as it currently does.

I've tried width & height selectors but that leaves the section height in place creating a large white space.

Thanks in advance for your help!

On 4/12/2022 at 1:30 AM, skalison said:

Site URL: https://www.mcbride-architects.com/all-projects/berkshires-modern

I wanted to see if there was a way to resize the hero banner image on mobile. The current mobile view has the default sizing of the banner image, but the client is looking to have it fit more horizontal like it does on desktop. Essentially I'd like it to crop more off the top/bottom than from the left/right as it currently does.

I've tried width & height selectors but that leaves the section height in place creating a large white space.

Thanks in advance for your help!

Have you figured it out? Do you still need help?

On 4/14/2022 at 4:18 PM, bangank36 said:

Have you figured it out? Do you still need help?

@bangank36Yes! Are you able to help on the home page?

Right now we've applied this code, but there is still a large gap from the section appearing beneath it.

@media only screen and (max-width:767px) { 
  .gallery-fullscreen-slideshow-item-img {
    width:100% !important; 
    height: 50% !important;
  }}

https://www.mcbride-architects.com/

Thank you!

45 minutes ago, skalison said:

@bangank36Yes! Are you able to help on the home page?

Right now we've applied this code, but there is still a large gap from the section appearing beneath it.

@media only screen and (max-width:767px) { 
  .gallery-fullscreen-slideshow-item-img {
    width:100% !important; 
    height: 50% !important;
  }}

https://www.mcbride-architects.com/

Thank you!

Try

@media only screen and (max-width: 767px){
  section[data-section-id="61b58587f3c0e91347c23dc6"] .gallery-fullscreen-slideshow-item-img img {
    height: auto !important;
  }

  section[data-section-id="61b58587f3c0e91347c23dc6"] {
    height: unset !important;
  }
  section[data-section-id="61b58587f3c0e91347c23dc6"] .gallery-fullscreen-slideshow {
    height: 40vh !important;
  }
}

Let me know how it works on your site

25 minutes ago, bangank36 said:

Try

@media only screen and (max-width: 767px){
  section[data-section-id="61b58587f3c0e91347c23dc6"] .gallery-fullscreen-slideshow-item-img img {
    height: auto !important;
  }

  section[data-section-id="61b58587f3c0e91347c23dc6"] {
    height: unset !important;
  }
  section[data-section-id="61b58587f3c0e91347c23dc6"] .gallery-fullscreen-slideshow {
    height: 40vh !important;
  }
}

Let me know how it works on your site

@bangank36 Thank you!! Would you also be able to help with one other section of the home page?

Down a bit there is a quote section with a background image. I've tried a few ways to decrease the section height on mobile but nothing has worked. Do you know how I could do so so there is not so much space on top and bottom of the quote and lines?

Thank you!

On 4/18/2022 at 10:08 PM, skalison said:

@bangank36 Thank you!! Would you also be able to help with one other section of the home page?

Down a bit there is a quote section with a background image. I've tried a few ways to decrease the section height on mobile but nothing has worked. Do you know how I could do so so there is not so much space on top and bottom of the quote and lines?

Thank you!

 

 

Add this to Design > Custom CSS

/* Mobile Philosophy */
@media screen and (max-width:767px) {
[data-section-id="625dbe069ac76d135501afb6"] {
    min-height: unset !important;
    height: 25vh;
}}