Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Sp Slideshow not responsive

Featured Lock Resolved Issue
Hello,

I am using Sp Page Builder Pro 3.6.1 and I have imported the Sp slider.
But the slider is not responsive.
The left image is getting pulled out of proportions (I want to keep it full column with and height).
See screenshots attached. Can you help me out?

With kind regards,

Attachments (2)

  • Schermafbeelding 2019-08-02 om 14.31.59.png
    Schermafbeelding 2019-08-02 om 14.31.59.png 290 KB
  • Schermafbeelding 2019-08-02 om 14.29.50.png
    Schermafbeelding 2019-08-02 om 14.29.50.png 594.4 KB

8 Answers

Sifat - Staff

More than a month ago #Permalink
Hi,
Actually when you are trying to show a large image in a small area then you have two options in hand.
1) To show the full image in that small area. Which will squish the image. Which you are using.
2) To get the ratio properly but that won't show the full image.

Please use this css into your custom css and that'll enable the second option and that won't show the full image.

.sppb-sp-slider-image img {
object-fit: cover !important;
}


-Thanks

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your query. I think you are talking about any of our slider addon. If that is the case then you can easily use the responsive mode for that http://prntscr.com/oog1cl
Or you can share the exact page url here thus i can check.

-Best Regards

L. Leijen

More than a month ago #Permalink
Hello,

Sorry, I had to formulate my issue better. The text is no problem, I can fix that in the responsive mode.
But I'm having issues with the ratio of the left image, the proportions aren't right. See screenshots below.

I need the image to fill the left column, but also keep the right ratio.

With kind regards,

Attachments (3)

  • Schermafbeelding 2019-08-05 om 10.50.38.png
    Schermafbeelding 2019-08-05 om 10.50.38.png 536.4 KB
  • Schermafbeelding 2019-08-05 om 10.51.09.png
    Schermafbeelding 2019-08-05 om 10.51.09.png 765.2 KB
  • Schermafbeelding 2019-08-05 om 10.50.46.png
    Schermafbeelding 2019-08-05 om 10.50.46.png 713.5 KB

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your query. Actually the image ratio will change automatically according to the device width. There is no option to control it manually. Would you please share the exact page url here? I'll check if i can do something for you.

-Best Regards

L. Leijen

More than a month ago #Permalink
Hi,
Thanks for your query. Actually the image ratio will change automatically according to the device width. There is no option to control it manually. Would you please share the exact page url here? I'll check if i can do something for you.

-Best Regards


Hello,

Thank you for your response. I don't need to control it manually, I just need the picture to be in the correct ratio. The image is getting squished horizontally, see screenshots.

The page url: https://www.totalpoolconcept.be
But the same happens in the demo version.

With kind Regards,

Attachments (2)

  • Schermafbeelding 2019-08-07 om 08.41.30.png
    Schermafbeelding 2019-08-07 om 08.41.30.png 649.9 KB
  • Schermafbeelding 2019-08-07 om 08.41.21.png
    Schermafbeelding 2019-08-07 om 08.41.21.png 619.5 KB

L. Leijen

More than a month ago #Permalink
Hi,
Actually when you are trying to show a large image in a small area then you have two options in hand.
1) To show the full image in that small area. Which will squish the image. Which you are using.
2) To get the ratio properly but that won't show the full image.

Please use this css into your custom css and that'll enable the second option and that won't show the full image.

.sppb-sp-slider-image img {
object-fit: cover !important;
}


-Thanks


This is the soliton, thanks a lot.

Maybe a good idea to add this to the slider in the next update?
Because it looks really weird and unprofessional when the image isn't in the right proportions.

Thanks again!

Sifat - Staff

More than a month ago #Permalink
You are always welcome :)


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 130
Toufiq

Toufiq

Total Accepted Answers: 100
Sifat

Sifat

Total Accepted Answers: 63
RV

RAFFAELE VIOLA

Total Accepted Answers: 2
DS

Dustin Swayne

Total Accepted Answers: 1

116

Templates

299714

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us