Dawn Theme - Slideshow - Space between picture and control buttons

Store Design
, , ,
1

Hey everybody,

i have a question about my slideshow. On desktop it looks great, but on mobile i‘ve changed the height of the picture to fit to my thoughts.

The picture looks great and in the exact height but the control buttons for the slideshow are now apart from the picture.

Does anyone have a solution for that to delete the space between?

Cheers

// Ryan

1 Like
2

Hi Ryan,

The best solution to get a professional look of the slider is to have one for desktop and the other to mobile. We can add a simple code which slider to appear based on the device size. Let me know if you need guidance how to acheive this.

3

Hey Natasha,

thanks for you’re reply. I’m actually using a custom code to have mobile and desktop separately, it was posted somewhere in the community. But the control buttons are off when I add the mobile picture.

4

I forgot to mention.

The website is: https://einszwei.shop

Ryanmue_0-1705871450473.png
Ryanmue_0-1705871450473.png1179×2556 185 KB

5

Hi @Ryanmue

I dig in your css code. So I found something. Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.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:

@media only screen and (max-width: 749px){
.banner__media {
    height: 100% !important;
}
}

And Save.

Result:

Made4uoRibe_0-1705878794403.png
Made4uoRibe_0-1705878794403.png338×666 244 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!