Jump to content

Banner image not resizing for mobile, desktop

Recommended Posts

 

We have a gif as a banner image on one of our pages that doesn't resize to fit desktop displays, and doesn't resize at all for mobile. I found several threads and on the forum and followed the advice to add a custom CSS code to direct the site to use a different image on mobile, but thus far nothing has worked. 

How do I configure the current banner image to automatically resize for desktops and mobile displays or is there a custom CSS code I can add that directs the page to use an alternate (gif) image for mobile on that page only?

 

Edited by u28h20
Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

12 hours ago, u28h20 said:

 

We have a gif as a banner image on one of our pages that doesn't resize to fit desktop displays, and doesn't resize at all for mobile. I found several threads and on the forum and followed the advice to add a custom CSS code to direct the site to use a different image on mobile, but thus far nothing has worked. 

How do I configure the current banner image to automatically resize for desktops and mobile displays or is there a custom CSS code I can add that directs the page to use an alternate (gif) image for mobile on that page only?

Here's the page: https://www.nysid.edu/commencement-2022 )

Try adding to Home > Design > Custom Css

.Intro-image.loaded  img{
  width: 100% !important;
  height: auto !important;
  left: 0 !important;

}

Let me know how it works

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 2/24/2022 at 10:46 AM, bangank36 said:

Try adding to Home > Design > Custom Css

.Intro-image.loaded  img{
  width: 100% !important;
  height: auto !important;
  left: 0 !important;

}

Let me know how it works

Thank you! That helped with the resizing. This created another issue on mobile:

 

1. There's no padding at the top, so part the image is cut off by the white background of the navigation bar. 

 

2. In order for the full height of the image to to be visible on desktop displays, I had to put a spacer bar on top of the image. Now, on mobile, that spacer bar creates a dark blue box below the banner image. How do I remove this, just for mobile? 

Edited by u28h20
Link to comment
On 2/25/2022 at 3:02 AM, u28h20 said:

Thank you! That helped with the resizing. This created another issue on mobile:

 

1. There's no padding at the top, so part the image is cut off by the white background of the navigation bar. 

 

2. In order for the full height of the image to to be visible on desktop displays, I had to put a spacer bar on top of the image. Now, on mobile, that spacer bar creates a dark blue box below the banner image. How do I remove this, just for mobile? 

Don't remove above code. Add this to Design > Custom CSS

@media screen and (max-width:767px) {
body#collection-620ea16bb04b0051114435d8 section.Intro.Intro--has-image {
    height: 135px !important;
}
}

 

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.