We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

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

Your Time: Our Time:

images/pictures of image carousel are distorted

Featured Lock Resolved Bug
I just added a "Image carousel" to my page. All the pictures are 400px(height) x 300px(width) and I want to make the carousel 400px high. But the pictures are somehow distorted, they are stretched in vertical or horizontal direction.

If I set "number of items in each slide" to 2. The pictures are horizontally stretched. Vertically compressed. If I set it to 3. The pictures are vertically stretched.

How can this issue be fixed?

Attachments (3)

  • Auswahl_070.png
    Auswahl_070.png 430.9 KB
  • Auswahl_071.png
    Auswahl_071.png 56.3 KB
  • Auswahl_072.png
    Auswahl_072.png 551 KB

7 Answers

Ofi Khan - Staff

More than a month ago #Permalink
Hello Susanne,
Apology for your issue. Please share your administrator access via PM to check. Click on my avatar and send message to PM.

- Best regards

Susanne

More than a month ago #Permalink
Hi Ofi,

can you please help with this issue?
The site is under development and is by far not ready to go online yet.

Regards
Susanne

Ofi Khan - Staff

More than a month ago #Permalink
Stretching is normal. It is done according to the carousel style proportion. I have used carousel height 300px and number of items in each slide 2. It looks better. You need to find the proper adjustment by changing the height and number of items. It's also recommended that you resize your photo to the same proportion for better viewing angle.
Screenshot_108.png

- Best regards

Attachments (1)

  • Screenshot_108.png
    Screenshot_108.png 558.4 KB

Susanne

More than a month ago #Permalink
But it is impossible to find the right height and number of items because of different screen sizes and screen resolutions. That is impossible, right? There is no solution for this in that way.

And if I look at your pictures, they are distorted too. Sorry to say that but that does not look good at all.

So what else can you recommend? Is it not possible to somehow make the settings that the pictures are not changed in width and just adjusted via number of slides shown and/or gutter or something like that.

Pavel

More than a month ago #Permalink
Hi Susanne . I very much hope that the Joomshaper team fix it in future updates. But at the moment, it can be corrected only by an additional css coding.

Susanne

4 weeks ago #Permalink
What? Are you serious about that? :o

I need CSS to have the pictures in an image carousel not distorted?
That is... almost unbelievable to be honest. Like I said, there are different screen sizes, different screen resolutions and here the images are always distorted if someone does not fix it with extra CSS? :(
That is really strange to me and I thought SP PageBuilder is such a powerful tool but those basics do not work.

But okay,... Whatsoever...

How can I edit the CSS so that the images in my image carousel are not distorted?
Can someone help with that?

Pavel

4 weeks ago #Permalink
How can I edit the CSS so that the images in my image carousel are not distorted?

Hi. Your images should be the same size or the same proportions. If it is not, at first, prepare it in Photoshop.

Paste the following code in the css box of addon.

.sppb-carousel-extended-item img {
height: auto;
}

1.jpg
Then adjust for all devices the number of images in a slide and the height of the carousel (exactly in this order).

It may require an additional css code. It depends on your particular case.

Attachments (1)

  • 1.jpg
    1.jpg 133.3 KB


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

124

Templates

331322

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