DAWN theme slideshow image not adapting properly on different mobile devices

Store Design
, , ,

Topic summary

A user modified their DAWN theme slideshow to make it clickable by adding custom CSS to the section, but this caused responsive display issues across different mobile devices.

Current Problem:

  • Images display correctly on larger screens (iPhone 12 Max)
  • Images appear slightly cropped on smaller screens (iPhone 10s)
  • The CSS code makes the slideshow text wrapper and banner buttons cover the full area with adjusted positioning

Proposed Solution:
A community helper suggested adding media query CSS targeting specific screen widths:

  • For screens max-width 749px: Apply padding of 2rem 1.5rem to .banner__box
  • For screens max-width 450px: Remove padding (set to 0) on .banner__box

The fix involves adding responsive breakpoints to the base.css file to ensure proper image scaling and padding adjustments across different mobile device sizes. The solution uses media queries to handle the varying screen dimensions that are causing the cropping issue.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

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

2

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.

3

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.

4

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

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