Removing empty space between slider and play and stop.

[chefsimecek]

Hey,

I recently changed the resolution of the slider to fit better on the phone and it looks nicer on the desktop also, however, it created space under it, does anyone know where I can adjust this space (remove). Also, I would be very happy if someone has a better recommendation of the code to make the desktop and phone more fit. I'm not a coder professional, so any help is appreciated. THANK YOU!

[sahilsharma9515]

Hi @chefsimecek 

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

Best regards

Sahil

[chefsimecek]

Hey, sure www.littlesicily.cz about the password, you don't mean the main account password right? Pretty new here, so maybe stupid question.

[sahilsharma9515]

Hi @chefsimecek  Thanks for the URL, please add the below code.

<style>
@media screen and (min-width: 750px) {
    .banner--small:not(.banner--adapt) {
        min-height: 18rem !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;
}

</style>

Please follow the steps:

1. Login in shopify admin.
2. Click on the Online Store.
3. Then click on the button next to Customize in live Theme.
4. Click Edit Code.
5. Search theme.liquid in the code in left hand side in your theme.
6. Add the following code in the bottom of the file above </body> tag

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[chefsimecek]

Hey, this almost is what I want, just a little crushes there. If little update of the resolution, it will not cut the picture on the deskop. Or if you provide me the resolution I should use for future graphics, I would use and this would be fixed. However, on the phone is doing each time something esle with the space, I have no idea why. Maybe phone version we can keep as it was, as I don't like this crooping of the pictures, doesn't look natural.

[sahilsharma9515]

@chefsimecek Just update the code

@media screen and (min-width: 750px) {
    .banner--small:not(.banner--adapt) {
        min-height: 20rem !important;
    }
}

and it should not cut the image.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[chefsimecek]

Okay the desktop is fixed. However, can I go back to the phone version as it was on screen one? As now is slide like this and two other different again. I think I preferred the phone version like is on slide 1 now. Thank you for helping.

[sahilsharma9515 · Accepted solution]

@chefsimecek  Just update the code and it will fix it

.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;
}

If you want it back to what it was earlier just don't add the above code and also remove this code that I have provided earlier

.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;
}

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[chefsimecek]

You're amazing, thank you very much. 🙂

[topnewyork]

Hi @chefsimecek , 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
@media only screen and (min-width: 768px) {
    #shopify-section-template--21139304448324__slideshow .slideshow__slide {
        height: 72vh !important;
    }
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[BSSCommerce-B2B]

@chefsimecek ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above </body>

<style>
  .slideshow__media.banner__media.media {
      height: 104%;
  }
  .slideshow__text.banner__box {
    position: absolute;
    padding: 0;
    width: fit-content;
    background: transparent; 
  }
  #shopify-section-template--21139304448324__slideshow .slideshow__slide {
    height: 40vh
  }
</style>

Result
PC:

Mobile:

If it helps you, please like and mark it as the solution.

Best Regards

[chefsimecek]

The thing is, I would like to keep the resolution of the pictures now as it is, I only want to remove the space off. In this solution, the picture on the phone is zoomed in again and when you skip to the next one, it doesn't look nice. So in short, I can accept a full-screen slider on the desktop, but I need the slider on the phone to look also nice, as 80% of the customers open the store anyway on the phone. Or just to keep it as it is now and remove the empty space with current resolution off.