Jump to content

How to scale banner images on iPad/tablets

Recommended Posts

Site URL: https://www.hobbessakugamerch.com/

Hi,

I'm wondering how I can scale my banner image on my homepage so it appears properly on an iPad/tablet. Right now the image is heavily cropped when viewing it on an iPad. Example:

 

IMG_0051.thumb.PNG.d995ec9f1c8dfe92a217d034930efbe1.PNG

 

I've already injected some code that makes it appear properly on mobile devices. Here's what the same page looks like on mobile:

Screenshot_20211114-201758_Chrome.thumb.jpeg.d18e41f3aec8e496eac8ac08880d96b6.jpeg

 

Here's the code I injected to make that work:

 

<style>
  @media screen and (max-width:767px) {
    .gallery-fullscreen-slideshow[data-width="full-bleed"] {
        height: 22vh !important;
    }
  }
</style>

 

So I'm wondering how I can get that effect, which automatically scales the banner down on mobile devices, to work on tablets.

 

Thanks!

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

20 hours ago, HobbesSakuga said:

Site URL: https://www.hobbessakugamerch.com/

Hi,

I'm wondering how I can scale my banner image on my homepage so it appears properly on an iPad/tablet. Right now the image is heavily cropped when viewing it on an iPad. Example:

 

IMG_0051.thumb.PNG.d995ec9f1c8dfe92a217d034930efbe1.PNG

 

I've already injected some code that makes it appear properly on mobile devices. Here's what the same page looks like on mobile:

Screenshot_20211114-201758_Chrome.thumb.jpeg.d18e41f3aec8e496eac8ac08880d96b6.jpeg

 

Here's the code I injected to make that work:

 

<style>
  @media screen and (max-width:767px) {
    .gallery-fullscreen-slideshow[data-width="full-bleed"] {
        height: 22vh !important;
    }
  }
</style>

 

So I'm wondering how I can get that effect, which automatically scales the banner down on mobile devices, to work on tablets.

 

Thanks!

Hi,

You can try adding to Home > Design > Custom Css

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  section[data-section-id="600299ec655a78118b8ecb77"] img {
    height: auto !important;
  }
  section[data-section-id="600299ec655a78118b8ecb77"] .content-wrapper {
    height: 33vh !important;
  }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

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

Thank you!

4 hours ago, bangank36 said:

Hi,

You can try adding to Home > Design > Custom Css

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  section[data-section-id="600299ec655a78118b8ecb77"] img {
    height: auto !important;
  }
  section[data-section-id="600299ec655a78118b8ecb77"] .content-wrapper {
    height: 33vh !important;
  }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Thank you! That worked

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.