Slideshow settings - Forum | JoomShaper
Staff replied SP Page Builder

Slideshow settings

Asked by YUMA SCOTT 2 years ago Last activity 2 years 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.

2 replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
2 years ago · edited

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.

YUMA SCOTT Asked this
2 years ago

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!

Mehtaz Afsana Borsha Staff
2 years ago

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.

YUMA SCOTT Asked this
2 years ago

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?

Mehtaz Afsana Borsha Staff
2 years ago

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.

Log in to reply.