How can I effectively resize a custom slideshow for desktop and mobile?

Store Design
, ,

Topic summary

A user is struggling to properly resize a custom slideshow on their Shopify landing page for both desktop and mobile devices.

Main Issues:

  • Slideshow appears too large on both platforms
  • Unwanted padding or margin appears below images
  • Button positioning is incorrect on mobile (though correct on desktop)
  • Current setting: slide height adapts to first image

Technical Details:

  • User has implemented custom CSS attempting to control positioning and spacing
  • CSS includes rules for .slideshow, .slideshow-wrapper, and .slideshow__btn with absolute positioning and transform properties
  • Code includes !important flags to override default spacing
  • Media query targeting minimum width of 750px is present

The discussion remains open with no solutions provided yet. A preview link to the page was shared for troubleshooting purposes.

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

Hello,

I am redesigning my landing page and am having difficulty resizing a custom slideshow and optimizing the size for desktop and mobile, respectively. The slideshow is much too large for both desktop and mobile and has either padding or a margin below the images. Furthermore, the button is in the incorrect position on mobile.

Currently, slide height is set to adapt to first image.

I have the following custom HTML, which only seems to accurately place the button on desktop:

@media only screen and (min-width: 750px) {
.slideshow {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.slideshow-wrapper {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.slideshow__btn {
bottom: 150px;
transform: translateX(-50%);
position: absolute;
}
}

Preview of page here