Slideshow fit on the screen properly in mobile view

Store Design

Topic summary

A user is experiencing an issue where their slideshow doesn’t display properly on mobile devices and needs it to fit the screen correctly.

Proposed Solution:
Another participant provided CSS code to fix the mobile view:

  • Navigate to Online Store → Themes → Edit Code
  • Open Assets/styles.css
  • Add custom CSS targeting specific slideshow sections with a media query for screens under 749px width
  • The code adjusts width to 100%, removes padding, and sets flex-wrap properties for the image containers and heading elements

Status:
The discussion appears to have a technical solution offered but no confirmation yet on whether it resolved the issue. The fix involves modifying theme code directly through the Shopify admin.

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

Hi,

Slideshow I would like it to fit on the screen properly in mobile view

https://98x681bnbq6ifnnf-55570858102.shopifypreview.com

Mitch23_0-1716355837455.png
Mitch23_0-1716355837455.png3712×1878 464 KB

2

Hi @Mitch23 ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. Assets/styles.css
  2. Add code below to end of file
@media(max-width: 749px){
  #shopify-section-template--15357573234806__custom_liquid_EpxGnq p,
  #shopify-section-template--15357573234806__custom_liquid_WjCjeF p{
    width: 100%;
  }
  #shopify-section-template--15357573234806__custom_liquid_EpxGnq h2,
  #shopify-section-template--15357573234806__custom_liquid_WjCjeF h2 {
   width: 100%;
    padding: 0;
  }
  #shopify-section-template--15357573234806__custom_liquid_EpxGnq .image-container,
  #shopify-section-template--15357573234806__custom_liquid_WjCjeF .image-container {
    flex-flow: wrap;
  }
}