How do I change the ratio of Slideshow image?

Store Design
1

No matter what we try and do. The image that we use for our slideshow always takes up the same amount of space on the homepage. Even if we were to resize the image and copy and paste it into the original image, it just zooms in on it and makes it horrible quality. We’ve included an example below where you can see what were trying to accomplish. To recap. Basically, we don’t want the slideshow image to cover the entire screen, we want to leave space in between the bottom so you can see the next section. THANKS ! AND THE WEBSITE IS https://www.jaspersplus.com/

Jaspers_0-1646804924954.png
Jaspers_0-1646804924954.png1080×237 212 KB

1 Like
2

@Jaspers_1

can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
@media screen and (min-width: 641px) {
.slideshow:not(.slideshow--edge2edge) {
    margin: 0;
    margin-top: 20px;
}
}
1 Like
3

Hello friend, correct me if I’m wrong but it looks as if you just intend to add some padding slash margin. But in this case, we’re not necessarily looking to readjust the location of the image, but we’re really trying to change the aspect ratio of the image. If that makes sense? Again referring to our included example image, you can see the image on the right is a lot Less wide. As well as somewhat recessed. Etc. Now I don’t know if the best thing to do here, it would just to be to. Replace the slideshow with a customized CSS. Whether it be bootstrap or what have you. Unless you have some other ideas, Ketan?

1 Like
4

@Jaspers_1

yes don’t worry about this current code its work perferct

KetanKumar_0-1646807356973.png
KetanKumar_0-1646807356973.png1920×1080 237 KB

1 Like
5

Hi @Jaspers_1 ,

Please add below css in bottom of assets/theme.css file

@media screen and (min-width: 641px) { 
section[data-section-type="slideshow"] .container { 
  max-width: 90% !important;  /* whatever width you want */ 
}

if you want to reduce the space between header and slideshow, try this code

@media screen and (min-width: 641px) {
  .slideshow:not(.slideshow--edge2edge) {
    margin-top: 5px !important; /* whatever margin you want */ 
  }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

6

Nice piece of code. The only problem is it only affects the first slide.

7

Hi @Jaspers_1 ,

We changed the code to resize the slideshow, please try this code:

@media screen and (min-width: 641px) { 
   section[data-section-type="slideshow"] .slideshow--preserve-ratio { 
      width: 90% !important; /* whatever width you want */ 
      margin: auto; 
   } 
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.