Slideshow Settings - Question | JoomShaper
Back to the questions

Slideshow Settings

YS

YUMA SCOTT

SP Page Builder 1 year ago

Is there an option to make the photos shrink to pages size for each display? It seems to do this for mobile, but desktop/laptop it is too large for the display. I can do a screenshot if necessary.

0
5 Answers
Order by
Oldest Newest Votes
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 year ago #160347

Hi

Thanks for contacting us. You can use this custom CSS in your custom.css file


@media only screen and (max-width: 1700px) and (min-width: 768px)  {
.sp-slider .sp-item .sp-background{
  width: 1250px !important;
  max-width: 1250px !important;
}
}

-Regards.

0
YS
YUMA SCOTT
Accepted Answer
1 year ago #160462

Thanks, but that didn't seem to work. It actually seemed to make the mobile and tablet view worse. Is there a code that can make the sliders "contain" the image so it resizes appropriately?

Thanks again!

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 year ago #160481

But I have set this code only for Desktop, and its not effect your mobile and tablet. Its as the same as before on mobile and tablet.

0
YS
YUMA SCOTT
Accepted Answer
1 year ago #160611

Thanks but I've tried the code and it isn't making the images fit in the slider on desktop or other modes. I put the code in the custom area of the template as well as the slider style custom code, no luck.

I'm using a chrome laptop and chrome browser. The images are not changing size in other modes, it's only shrinking to fit in mobile portrait.

any other suggestions?

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 year ago #160637

Hi,

Thanks for reaching out to us.

You can control the height from here for each device resolution selected on topbar:

https://prnt.sc/tmc_VjVlmhE3

By the way, A good size for slideshow images is 1600x600, which balances quality and performance. Images should also be no more than 150 KB.

The minimum width of an image should be the same as the width of the slideshow container on the site. For example, if the site is 1920 pixels wide, the image should also be at least 1920 pixels wide.

Ideally, the height of the image should be 20% of the viewport or close to it, and the image should be scaled without cropping or zooming. However, this may not be possible with a responsive website. In this case, the slideshow may need to have a height of 80vh, which may cause the image to appear cropped on some devices. Alternatively, the entire image can be displayed on all devices, but the slideshow may not be able to have a height of 80vh on all devices.

0