REMOVING EXTRA SPACE BELOW SLIDESHOW IMAGE IN DAWN THEME

REMOVING EXTRA SPACE BELOW SLIDESHOW IMAGE IN DAWN THEME

DreamgiftStudio
Visitor
3 0 3

 

Hi , Just below my slideshow image there is a wide gap in the mobile view only .Desktop view looks fine . how to get rid of it , looks very unprofessional as its the first opening section of my website.,

WhatsApp Image 2023-06-09 at 12.47.18 AM.jpeg

Replies 7 (7)

Made4uo-Ribe
Shopify Partner
10203 2423 3069

Hi @DreamgiftStudio ,

Would you mind to share your URL website and Password (if its protected)? So I can give you the solution. 

Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
DreamgiftStudio
Visitor
3 0 3

www.dreamgiftstudio.com

 

NO PASWORD .

Made4uo-Ribe
Shopify Partner
10203 2423 3069

Hi @DreamgiftStudio ,

Try this.

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "theme.css, styles.css or base.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.

 

@media only screen and (max-width: 750px) {
.slideshow__slide.grid__item {
    position: relative;
}

.slideshow__text-wrapper.banner__content {
    position: absolute;
    bottom: 1rem;
}

.slideshow__text.banner__box.content-container {
    padding: 0;
    background: transparent;
}
}

 

  • Result:
  • Ribe_Dagandara_0-1686340398337.png

    I hope it help. 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

miguel_liquify
Shopify Partner
176 18 16

Try going  to the section-image-banner.css asset and change the padding of the class .section-image-banner.css to 1rem 3.5rem

★★★ Need help setting up your Shopify store? Hire me here: https://liquify.design ★★★

diego_ezfy
Shopify Partner
2988 573 931

@DreamgiftStudio 

  1. From your Shopify admin, navigate to Online Store > Themes > Actions > Edit Code > base.css
  2. paste the following at the very bottom:

 

@media (max-width: 749px){
    [id] .slideshow{
        position: relative;
    }

  [id] [class*='banner__content'] {
      position: absolute;
      top: 0;
      height: 100%;
  }
    
  [id] [class*='banner__content']  > *{
    background: rgba(255,255,255,0.2)
  }
   
}

 

 

it should move the button inside the slideshow and fix the problem.

Kind regards,
Diego

ARebel
Visitor
1 0 0

I'm having same problem currently

Made4uo-Ribe
Shopify Partner
10203 2423 3069

Hi @ARebel 

Did you try the codes above? If its not working, please share your store URL. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.