Jump to content

Squarespace 7.1 - Mobile Hero Banner Image Height

Recommended Posts

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!

Screen Shot 2022-04-11 at 1.24.09 PM.png

Link to comment
  • Replies 5
  • Views 837
  • Created
  • Last Reply

Top Posters In This Topic

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!

Screen Shot 2022-04-11 at 1.24.09 PM.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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!

IMG_1579.PNG

Link to comment
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!

IMG_1579.PNG

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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!

 

 

IMG_1580.PNG

Edited by skalison
Additional information
Link to comment
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!

 

 

IMG_1580.PNG

Add this to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.