Slideshow Css problem on refresh

Shopify Discussion

Topic summary

A Shopify store owner reported a slideshow width display issue on mobile devices for their site (deepsealifesciences.pk) using the Refresh theme. The slideshow appeared correctly on desktop but had formatting problems on mobile.

Troubleshooting Process:

  • Initial CSS solution targeted a specific slide element with height: 0 !important
  • This caused the second slider image to disappear entirely
  • A revised solution was provided: adding padding: 0 !important to the .banner_box class in the base.css file

Resolution:
The issue appears to be resolved after applying the updated CSS code. The fix involved modifying the theme’s base.css file in the assets folder to correct the mobile padding/spacing issue.

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

theme: Refresh

Domain: deepsealifesciences.pk

I’m having a problem with slideshow width it is not showing properly on mobile while its completely fine on desktop.

kindly solve my problem.

thanks

here is the mobile view

Note: I used slideshow section not image banner.

2

Hallo @Subhan2

send url

3

www.deepsealifesciences.pk

4

Hallo @Subhan2

You can add code by following these steps to change

  1. Go to Online Store → Theme → Edit code > assets > base.css

paste below code at bottom

div#Slide-template--15479728603181__slideshow-2 {
height: 0 !important;
}

If you require any further information, feel free to contact me.

Best regards,

5

this code removed the second image from my slider now it look like it

Subhan2_0-1673959706868.png
Subhan2_0-1673959706868.png1061×577 18.1 KB

6

Hallo @Subhan2

note:- please remove old css add this css.

You can add code by following these steps to change

  1. Go to Online Store → Theme → Edit code > assets > base.css

paste below code at bottom

.banner__box{
padding:0 !important;
}

If you require any further information, feel free to contact me.

Best regards,

7

Seems like your problem is solved bro. Good Luck

1f642.png

:slightly_smiling_face: :slightly_smiling_face: :slightly_smiling_face: