Why does my image banner overlap into the next section on my dawn theme?

Store Design

Topic summary

A user is experiencing an issue where image banners overlap into subsequent sections on the Dawn theme after adding custom CSS to make images full viewport height (100vh) on mobile devices. The problem occurs with any image section, and a screenshot demonstrates the overlap.

Key Technical Details:

  • Custom CSS was added to section-image-banner.css targeting .banner__media and slider elements
  • The code successfully extends image height but causes unintended overlap

Side Discussions:

  • Another user resolved a cart drawer delete button issue using CSS (pointer-events: unset !important)
  • A request for hiding navigation arrows on mobile devices (no solution provided yet)
  • A similar video banner bleeding issue was addressed with CSS using object-fit: cover and absolute positioning

Status: The original poster’s overlap issue remains unresolved. A community member requested the store URL and password to investigate further, but no follow-up solution has been posted.

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

Hello,

Im trying to add different sections to my dawn theme. but everytime i try to do it the section before it bleeds into the next section. It happens with any image.

I added this code to section-image-banner.css :

}
@media screen and (max-width: 749px) {
.banner__media {height: 100vh !important;}
.slider.slider–everywhere .slider__slide {height: 100vh !important;}
}

But i like how it made the pictures in my sliders longer.

Here is the problem

Screenshot 2024-04-11 at 23.50.03.png
Screenshot 2024-04-11 at 23.50.03.png2658×1486 297 KB

As you can see it overlaps with the next section.

Any kind of help would be appreciated. Thank you!

2

@Zeblox

your store url with store front password?

thanks

3

hii, can you please help me my cart drawer delete button does not working …please help!

My store URL :https://mansaroverfurnishings.com/

4

@manan123

can you please add the css code into your base.css file

.cart-drawer .cart-item__totals {
	pointer-events: unset !important;
}

thanks

1 Like
5

Thanks It worked

6

i need one more help , i want to hide those arrows in mobile devices .Please help me with the code..See screenshot for reference,

manan123_0-1713255268603.png
manan123_0-1713255268603.png353×859 221 KB

My Store Link: https://mansaroverfurnishings.com/

7

I am having a similar issue I added a video banner with code from this article https://shopidevs.com/add-shopify-video-to-banner-section/ and it worked but its bleeding off the page. https://forever-friday.com/ pw:itsfriday

I just want it contained to the original image banner sizing.

8

Hello @Fridaystore

Please follow these steps to adjust the video size:

Step 1: Go to Shopify Admin → Online Store → Themes → Edit Code.

Step 2: Open the base.css file (or theme.css if that’s the one you’re using).

Step 3: Scroll to the bottom of the file and add this code:

.videoBackground .fullscreen-video-wrap .video-js {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: -1;
}

Step 4: Click Save and check your site.

After adding the code, if your issue is not solved, feel free to inbox me. I’d love to adjust it for you! :blush:

– Sadikur from ShopiDevs