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
  • 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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.