Slideshow images same size on mobile and desktop

Topic summary

Main issue: Making slideshow images display appropriately on both desktop and mobile in the Shopify “Simple” theme. One user wants the same slideshow to look similar across devices; another wants different images for mobile vs. desktop.

Attempts so far:

  • Suggested approach: create two separate slideshows (one for mobile, one for desktop) and hide each with CSS media queries (CSS rules that apply at specific screen widths).
  • Tried CSS examples:
    @media (min-width: 991px) { #slideshow-1 { display: none!important; }} — did not work for the second user.
    @media screen and (min-width: 701px) { #div-mobile { display:none; } #div-desktop { display:block; } } — did not resolve the original poster’s issue.

Context and access:

Current status:

  • The helper indicates a universal CSS fix isn’t working with the Simple theme and theme-specific coding is required after reviewing the theme code.
  • The original poster has requested the helper to look into their theme. No confirmed solution or code changes posted yet; discussion remains open.
Summarized with AI on February 28. AI used: gpt-5.

Hello i have the same problem.

I would like to add different photo for the mobile phones and different for desktop.My site is ewoodcollection.com.

Can you suggest me a solution please?