[BikulParticipant]

Hello,

I have a carousel slideshow with the Slider Revolution containing square images which I show from top to bottom of the page.

When I look at it on an iPhone Portrait the square image will get cropped.

How can I avoid this and show the square image also there?

As the site is not visible to the public yet I will give you login credentials in next private post.

Thank you
Bernd

[BikulParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

After exploring a bit the issue my conclusions are that you need to reduce the size of your images in order that they show as they should in the first round.

If you check on your telephone, the first time the slider load the images are incomplete loaded so they do look bad, on the second round they are already loaded, so my suggestion would be using smaller images that will still statify the definition on desktops of course, and before uploading to slider revolution you could use http://www.tinypng.com to make the pictures lighters.

Hope that helps,

Joao

[BikulParticipant]

Hi Joao

Thank you for your suggestions and link! But I dont think that it has something to do with the image size as the other slideshows with same image size 1920×1080 (like http://test.dirkkruell.de/portfolio/auto-kalender/) are also not messed up (can also not see some incomplete loaded pictures in Beayuty Messe).

I tried first to load image size 1080×1080, just the simple picture, no white around it, but failed here too.

I do not know if you understood what I mean, see the picture below. On iPhone I would like to see the version shown on the right side.

Thank you
bernd

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> CSS :

@media (max-width:480px){
.tp-bgimg.defaultimg {
    background-size: contain !important;
}
}

Hope that helps.

[BikulParticipant]

Hi Christopher,

sorry, but this has no effect on the Revolution Slider slideshow “Beauty Messe”

I think configurations or CSS codes have to made regarding this slideshow as I want only to change it there.

[BikulParticipant]

Hello

I duplicated Slider Revolution “Beauty Messe” to “Beauty Messe 1080” where I changed all slide images to 1080 x 1080 px (no more white). I modified the slider a little bit but still have no success.

http://test.dirkkruell.de/portfolio/beauty-messe-1080/

What I want sounds simple:
A Slider where a square image is always shown as a square. If the window is big enough it should fill the window 100% vertically. If the window is too narrow it should show the sqaure vertically centered.

How to do that?
Thanks for help
Bernd

[BikulParticipant]

uff

I created a new slider “Beauty Messe 3”
http://test.dirkkruell.de/portfolio/beauty-messe-3/

Seems to be perfect. Just one problem:
On the right side of the browser window I still see the scrollbar. How to disable that here?

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> CSS :

body {
    overflow: hidden;
}

Hope that helps.

[BikulParticipant]

Hi Christopher

supi: that worked!

Thank you

[JoaoModerator]

Great to hear it!

Let us know if you need help with anything else.

Joao

[Author]

Posts