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?
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:
- Original site: https://cravezandcreationz.com/ (password disabled).
- Second site: ewoodcollection.com.
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.