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

JoyDion
Visitor
2 0 0
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
Replies 3 (3)

Rishihuptech
Shopify Partner
486 82 94

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.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
JoyDion
Visitor
2 0 0

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. 

Rishihuptech
Shopify Partner
486 82 94

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

 

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

 



 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required