New Shopify Certification now available: Liquid Storefronts for Theme Developers

How to remove white space for Slideshow & restore dots

Solved
sgstyli
Visitor
2 0 0

Hi all,

 

Would really appreciate if someone could help me with this issue!

I'm using Debut theme and i added in a slideshow but i can't remove the white space below my slideshow in both desktop and mobile. Also, tried to edit some codes and now the slideshow dots are arrows instead on mobile.. :'(

 

On mobile:

Screenshot 2023-11-20 at 12.34.31 AM.png

 

On desktop:

Screenshot 2023-11-20 at 12.35.38 AM.png

 

 

 

 

 

 

 

 

 

 

 

website is sgstyli.com

 

Thank you!!

Accepted Solution (1)
BSS-Commerce
Shopify Expert
2942 393 413

This is an accepted solution.

Hi @sgstyli ,

You can add this CSS to the base.css file:

.index-section--slideshow {
    padding-bottom: 0 !important;
    border-bottom: 0;
}
.index-section--flush.index-section--slideshow {
    padding-bottom: 0;
}

@media only screen and (max-width: 749px){
.shopify-section.index-section:has(.rich-text){
padding-top: 0;
}
.slideshow__text-wrap slideshow__text-wrap--mobile {
display: flex;
    display: flex;
    position: relative;
    top: -0.5rem;
    height: 0.5em;
    background-color: var(--color-bg);
    width: auto;
    margin: unset;
    z-index: 8;
    justify-content: center;
}
}

view (70).png

Hope it helps @sgstyli 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 2 (2)
BSS-Commerce
Shopify Expert
2942 393 413

This is an accepted solution.

Hi @sgstyli ,

You can add this CSS to the base.css file:

.index-section--slideshow {
    padding-bottom: 0 !important;
    border-bottom: 0;
}
.index-section--flush.index-section--slideshow {
    padding-bottom: 0;
}

@media only screen and (max-width: 749px){
.shopify-section.index-section:has(.rich-text){
padding-top: 0;
}
.slideshow__text-wrap slideshow__text-wrap--mobile {
display: flex;
    display: flex;
    position: relative;
    top: -0.5rem;
    height: 0.5em;
    background-color: var(--color-bg);
    width: auto;
    margin: unset;
    z-index: 8;
    justify-content: center;
}
}

view (70).png

Hope it helps @sgstyli 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

sgstyli
Visitor
2 0 0

Thank you so much for your fast reply!! Unfortunately I couldn't find the base file. But anyways, i've decided to change to DAWN theme and it's SO much easier now. Thank you so much for your support to a complete newbie :')