How to scale banner images on iPad/tablets

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:

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

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!

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:

 

 

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

 

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

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