How to make slideshow image fit full screen mobile version for Brooklyn theme

jakelemon · ‎11-29-2021

Hi there,

My slideshow image for desktop view is perfect size however, when on mobile, the image fills the screen. How can I fix it so that the image for desktop stays the same, however on mobile, the image fits the full screen.

See below: The image for mobile version cuts off. How can I fix it so the photo is shown full screen even if it means the image will appear smaller.

My store URL is https://www.nextlevelsupps.com.au/

Thanks in advance!

Sheesh_b · ‎11-29-2021

Hi @jakelemon

I did a quick CSS turn around to do this.

Copy and paste the below code in theme.liquid template in <head> part

<style>
    @media screen and (max-width: 768px){
      #Hero-slideshow.hero .hero__image {
        object-fit: contain;
        font-family: "object-fit: contain";
      }
      #Hero-slideshow.hero .slick-list {
        height: auto !important;
      }
      #Hero-slideshow.hero[data-adapt="false"] {
        height: auto;
      }
    }
  </style>

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION

Sheesh_b · ‎11-29-2021

Hi @jakelemon

In your case the Slider wrapper id is 'HeroWrapper-1638168109e8c700a7' so replace '#Hero-slideshow' to '#HeroWrapper-1638168109e8c700a7'.

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION

jakelemon · ‎12-02-2021

@Sheesh_b Hi there, thanks for replying back. I tried putting the code in and it isn't working. I put the code on the line right under <head> on line 3 of theme.liquid file, is this the correct place to put it?

jakelemon · ‎12-02-2021

@Sheesh_b As the mobile site loads, the photo is full size however does not stay that way and goes back to the image being too big for the mobile site.

Sheesh_b · ‎12-02-2021

Hi @jakelemon

Kindly replace the previous code with below one

<style>
    @media screen and (max-width: 768px){
      .index-slideshow-section .hero .hero__image {
    object-fit: contain;
    font-family: "object-fit: contain";
}
      .index-slideshow-section .hero .slick-list {
        height: auto !important;
      }
      .index-slideshow-section .hero[data-adapt="false"] {
        height: auto;
      }
    }
  </style>

It will work as I tested it on front-end.

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION

LJD · ‎01-08-2025

Hi @Sheesh_b

Our store is having the same issues - I tried to insert the code above but having issues with no changes. Below is our current mobile layout but we want the slideshow to fit the full mobile length. Thanks!

Sheesh_b · ‎01-08-2025

Hi @LJD
Let me check this and I'll try to solve this.
Can you check if there is any option to keep the aspect ration of the image in mobile to as of first image?

Thanks

Sheesh B

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION

How to make slideshow image fit full screen mobile version for Brooklyn theme

How to make slideshow image fit full screen mobile version for Brooklyn theme

Community Blog Articles