Public Forums 71,145 posts

[Pierre van Lier Friend Pierre van LierJoin date: April 2015Posts: 57Downloads:41Uploads:10 Thanks: 19 Thanked: 1 times in 1 posts]

#1047696

Is there a way that i can get the slideshow responsive? Looks superb on laptop, but on a phone the images are not resized and I only see a small part of them…

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1047866

Hi
The slideshow was set to Auto to cover size because there is text floating over it and if the image size is set to 100% it will resize and text does not over the image in small devices.
You can change the background image size from the settings here > http://prntscr.com/fukf0k
and set it to 100%

Regards

[Pierre van Lier Friend Pierre van LierJoin date: April 2015Posts: 57Downloads:41Uploads:10 Thanks: 19 Thanked: 1 times in 1 posts]

#1048125

Thanks, I have altered the setting as suggested, but now run into the following problem. My slides are 1500*600 px. When I set minimum height to 600 I get a lot of open space below the slider on a tablet and a phone. PC is fine.

When I empty the minimum height field (it defaults to 100), only the top of the slider is displayed. What am I overlooking?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1048232

Hi
Can u share the site URL here?
Space can be due to height- – – list text here value, you added a fixed height.
Kindly follow my suggestion to make the background 100%.

Regards

[Pierre van Lier Friend Pierre van LierJoin date: April 2015Posts: 57Downloads:41Uploads:10 Thanks: 19 Thanked: 1 times in 1 posts]

#1048624

golfrestaurant-volentieri.nl is not the original site, but the problem is the same. Ive added a container slide, removed the text and buttons and set background to 100%. Slides are responsive but there is a height problem. On a laptop they’re cut off, and on a tablet and phone an area is added (blue in this case). I’ve included three screenshots.

---

Attachments:

1. 
2. 
3. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1048904

Hi
Its the padding of the container, add below code in custom css block and reduce the padding as per needs.

.jub-block.hero-7 .hero {
    padding-top: 140px;
    padding-bottom: 140px;
}

Regards

[Author]

Posts