Background gery color on slider-Dawn theme

Store Design
, , , , , , ,

Topic summary

A user is experiencing a grey background and large gap appearing on their image slideshow in the Dawn theme, particularly visible on mobile devices. The issue occurs intermittently when custom CSS is applied to hide the carousel on smaller screens and make images responsive.

Troubleshooting attempts:

  • Initial suggestion to add background-color: #fff; to .carousel or inspect the grey area to identify the correct element
  • User shared their Shopify store URL for direct inspection
  • The problematic CSS was temporarily removed, making diagnosis difficult

Proposed solution:
Add display: flex; to .slide-image class via the theme.liquid file under the <style> tag. The user prefers working directly in the section CSS field editor rather than editing theme files.

Current status:
The discussion remains open with the user seeking clarification on whether the proposed CSS fix can be implemented in the section CSS field instead of theme.liquid.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Dear friends,

I am getting a grey backgoud on the image slideshow and big gap. I appreciate your help on fixing this issue. This is the code and screen shot:

/* Hide carousel on screens smaller than 749px /
@media (max-width: 749px) {
.carousel {
display: none;
}
} / Ensure images are responsive /
.carousel img {
width: 100%; / Make the image fill its container /
height: auto; / Maintain aspect ratio /
max-width: 100%; / Prevent the image from exceeding its natural size /
display: block; / Remove extra space below the image */
}

Alliance_0-1742657344980.png
Alliance_0-1742657344980.png1920×1080 273 KB

Alliance_0-1742657049103.png
Alliance_0-1742657049103.png1920×1080 393 KB

Thanks and best regards

2

Try setting background-color: #fff; (or to your preferred color) on .carousel. If that does not work, inspect the grey area to know what element/class to target with your preferred color.

3

hey @Alliance share the URL of your website so i can help you

4

Hi mate,

https://ba0ven-x1.myshopify.com/

5

hey @Alliance i can’t find the blank space will you plz share the screen shot so i can help you

6

Because I removed the code. I will put it back and send you a screen shot. It goes showes here and there, and it creates a big gap on mobile view.

Alliance_0-1742662632794.png
Alliance_0-1742662632794.png1920×1080 568 KB

Alliance_1-1742662702373.png
Alliance_1-1742662702373.png1920×1080 404 KB

7 
.slide-image {
    display: flex;
}

MustafA16_0-1742662943422.png
MustafA16_0-1742662943422.png371×666 366 KB

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

8

I am using the code directly in the section css field editor. Is it possilbe to use that inside that css field?

9

This is the code:

.carousel img {
width: 100%;
height: auto;
max-width: 100%;
}

.navigation-controls {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}

.navigation-controls button {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
color: inherit;
}

.navigation-controls button:hover {
background: transparent !important;
}

10

try this code in follow these steps

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution