Why isn't my slideshow displaying in mobile view?

Topic summary

A user implemented custom CSS code to display different images for desktop and mobile versions of their site. However, after adding this code, slideshows now only appear on desktop—mobile view shows no images at all.

The problematic code includes:

  • CSS rules targeting .banner__media elements
  • Media queries set at max-width: 749px for mobile breakpoints
  • Display properties that hide/show different banner media elements

Current status:

  • The code snippet appears corrupted or improperly formatted (contains reversed/garbled text like “aidem” instead of “media”)
  • No solutions or responses have been provided yet
  • The issue remains unresolved and awaits community assistance
Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.

Hi,

I recently added the following code to be able to use different photos on the desktop and mobile version and now I have the problem that the slideshows only show the pictures on the desktop version and there is no picture on the mobil version.

The Code:

  1. .banner__media:first-child {

  2. width: 100%;

  3. }

  4. .banner__media+.banner__media {

  5. display: none;

  6. }

  7. @media screen and (max-width: 749px) {

  8. .banner__media:first-child {

  9. display: none;

  10. }

  11. .banner__media+.banner__media {

  12. width: 100%;

  13. display: block !important;

  14. }

  15. }

  16. @media screen and (max-width: 749px) {

  17. .banner__content::before{

  18. padding-bottom: 150% !important;

  19. }

  20. }