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

Store Design

Topic summary

A user is experiencing an issue with the Brooklyn theme where slideshow images display correctly on desktop but get cropped on mobile devices. They want the mobile version to show the full image, even if it appears smaller.

Proposed Solution:

  • Another user provided custom CSS code to be inserted in the theme.liquid file’s <head> section
  • The code targets the slider wrapper ID (specifically ‘#HeroWrapper-1638168109e8c700a7’ for this store)
  • Initial code was revised after the first attempt didn’t work properly

Current Status:

  • The issue remains unresolved for the original poster, who reports the image briefly displays full-size on mobile before reverting to the cropped view
  • A second user has joined the thread with the same problem on their store
  • The helper is investigating further and asking about aspect ratio settings for mobile images

The discussion involves code snippets and screenshot attachments showing the desktop vs. mobile display differences.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

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.

full screen desktop.jpg
full screen desktop.jpg2062×1426 252 KB

mobile shrunk.jpg
mobile shrunk.jpg2130×1476 142 KB

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

Thanks in advance!

2

Hi @jakelemon

I did a quick CSS turn around to do this.

Copy and paste the below code in theme.liquid template in part
3

Hi @jakelemon

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

4

@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 on line 3 of theme.liquid file, is this the correct place to put it?

5

@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.

6

Hi @jakelemon

Kindly replace the previous code with below one

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

7

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!

Liz James Designs Handmade Jewelry for Every Occasion.jpeg
Liz James Designs Handmade Jewelry for Every Occasion.jpeg1320×2868 302 KB

8

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