How to make a homepage slideshow fit fullscreen on all devices?

Store Design
, , , ,
1

Hello I would like to make the homepage slideshow image fit the screen when in fullscreen mode (so that is visible on all device sizes) it currently looks fine in all other modes, desktop, mobile.
Page: tinyvpn.app
Pass: Tiloht

biznazz101_0-1687298851729.png
biznazz101_0-1687298851729.png1805×1567 331 KB

biznazz101_1-1687298876496.png
biznazz101_1-1687298876496.png2699×1576 418 KB

I have tried all the custom CSS code I know to adjust the section to fit but I cannot get it to, this is currently applied:

.button {
  color: #6a6ec5;
  border: 5px solid #bbdfff;
  margin-block: -20%;
}
.banner__buttons {
  padding-box: 90%;
}
.banner--mobile-bottom {
  padding-top: 0%;
}

I have also tried the banner image section but that did not work either. I can redesign the image itself if needed, but would like to at least make the section fit first. I am currently using the latest version of the Refresh theme (10.0)

Thank you very much for the help!

2

Hello @biznazz101 ,

The code you provided seems to be related to styling buttons and banners rather than the homepage slideshow image. To make the homepage slideshow image fit the screen in fullscreen mode, you’ll need to use different CSS properties and target the relevant elements. Here’s an updated example:

.slideshow-container {
  position: relative;
  overflow: hidden;
}

.slideshow-image {
  object-fit: cover;
  width: 100%;
  height: 100vh;
}

Make sure to replace .slideshow-container and .slideshow-image with the correct class names or IDs that wrap your slideshow container and individual slideshow images, respectively.

Hope this can help.

Ali Reviews team.