DAWN theme slideshow image not adapting properly on different mobile devices.

[JoyDion]

Hi, I made changes to the slideshow making it clickable by adding CSS code on the slideshow section css but now  the slideshow images are not adapting properly across different mobile devices. Are there any methods to fix this?

This is the css code that is currently on the section css

.slideshow__text-wrapper {
padding: 0 !important;
max-width: 100% !important;
}
.slideshow__text {
height: 100% !important;
width: 100% !important;
opacity: 0;
max-width: 100% !important;
}
.banner__buttons .button {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}

website link: www.joydion.com

[Huptech-Web]

Hello! @JoyDion Please follow these steps to add this CSS code: 

1. Go to your Online Store 

2. Click on "Themes" 

3. Select "Edit code" 

4. Open your CSS file. If you have a custom CSS file, open that instead. 

5. If you can't find your custom CSS file, open "base.css" 

6. Add the following code at the end of the file. 

@media screen and (max-width: 749px) {
.banner__box {
    padding: 2rem 1.5rem;
}
}

Let me know if you need further assistance.

[JoyDion]

Hi! Thank you for replying! After adding the css code I tried viewing on a phone with bigger screen (Iphone 12 max) the image size is properly resized however when I viewed it on a smaller screen (Iphone 10s) the image is still slightly cropped. 

[Huptech-Web]

Hello! @JoyDion Please add this CSS code Also Below of the Above Code

@media screen and (max-width: 450px) {
.banner__box {
    padding: 0;
}
}