How to remove this blank space under my slider

[auragears]

Hey guys I have an issue here with probably the margin or padding of slider of mobile view. Web view looks fine as the space doesn't make it look weird but on mobile view, the space is really ugly. Any idea what code to change/add? 

Website: https://www.auragears.com/

[Tech_Coding]

Hello @auragears 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width:767px){
     .section-template--17819746271460__collection_list_Qz9NnC-padding {
        padding-top: 0 !important;
     }
     .banner--small.banner--mobile-bottom:not(.banner--adapt) .banner__media{
          height: 23px !important;
     }
     .slideshow__media img{
         object-fit: contain !important;
     }
     .banner--mobile-bottom .banner__box{
         padding: 0 3.5rem !important;
      }
}
</style>
RESULT:

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Bundler-Manuel]

Hey there @auragears  copy and paste this code let’s see if it works

.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-scheme-2.gradient.slideshow__text--right.slideshow__text-mobile--center {
padding: 10px !important;
}

.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-scheme-d93eacd2-39b4-481e-b97d-9f2cd20951c5.gradient.slideshow__text--right.slideshow__text-mobile--center {
padding: 10px !important;
}

[DaisyVo]

Hi @auragears ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

@media screen and (max-width: 768px){
.slideshow__text-wrapper.banner__content {
    display: none !important;
}
section.shopify-section:has(slideshow-component.slider-mobile-gutter.mobile-text-below) + .section-collection-list .collection-list-wrapper {
    padding-top: 10px !important;
}
}

Here is the result:

Please let me know if it works!

Best,

Daisy

[LizHoang]

Hi @auragears, thanks for reaching out.

To address the issue, please help me go to your Theme => Online store => Customize => Theme settings => Custom CSS and insert the following custom code: 

@media screen and (max-width: 749px) {
    .banner--mobile-bottom:not(.banner--stacked) .banner__content {
        order: 2;
        display: none !important;
    }
    .slider-mobile-gutter .slideshow__controls {
        display: none !important;
    }
}

This is the expected result: 

I hope my solution is helpful to you. 

Liz