Debut Theme - Banners are not resizing for mobile

Store Design

Topic summary

Issue: Desktop banners in the Debut theme weren’t resizing on mobile; the main banners are a 4-image slideshow.

Early suggestion: create separate desktop and mobile slideshows, add both to the page, then hide one via custom CSS based on screen resolution.

Implementation follow-up: requester asked how to prevent both showing; helpers requested the site URL (and password if protected) to provide tailored CSS.

Site shared: keikousa.com.

Final fix: add a CSS media query in Actions > Edit code > Assets > theme.scss.liquid to adjust the slideshow height on mobile.

Code provided: @media only screen and (max-width: 749px) { .slideshow.slideshow–medium { height: 200px !important; } }.

Explanation: a CSS media query applies styles depending on device width, ensuring the slideshow renders at a suitable height on small screens.

Outcome: user confirmed the change worked; the issue is resolved. A code snippet is central to the solution; no further action items remain.

Summarized with AI on February 3. AI used: gpt-5.
1

I’ve been unable to get my desktop banners to resize for mobile phones. I browsed the forums trying to look for answers but they’re not working. (Most answers tell me to paste a snippet of code at the bottom of theme.css) Any help is greatly appreciated.

Capturar.JPG
Capturar.JPG953×295 28.1 KB

2

@Keiko_Sports -

1] please create 2 banners, one for desk and one for mobile.

2] Add both banners to the page, so now your page have 2 banners

3] then using custom css we can hide the one not required as per the screen resolution

3

I’m using a slideshow of 4 images as my main banners. How would that work?

4

@Keiko_Sports - create slideshow of mobile banners

5

Ok, I can do that. Next step is not allowing both to be shown at the same time, how would I go on about implementing that?

6

@Keiko_Sports - we need css for that, if you share site link by adding both slideshows, then I can give you the css

7

Hi @Keiko_Sports ,

Please send your site and if your site is password protected, please send me the password. I will check it.

1 Like
8

Hi, I’m at https://keikousa.com/

9

Hi @Keiko_Sports ,

Please go to Actions > Edit code > Assets > theme.scss.liquid file and paste this at the bottom of the file:

@media only screen and (max-width: 749px) {
.slideshow.slideshow--medium {
    height: 200px !important;
}
}

Hope it helps!

1 Like
10

You’re brilliant. Thank you so much.

1 Like