Elegance slideshow image height issue

Elegance slideshow image height issue

by Glenn Sisson -
Number of replies: 5

Hi all,

I am testing the Elegance theme and our slideshow images are not displaying correctly when viewed on an iPad. The images (2 images joined horizontally by design) are not taking up the full height of the slideshow and are then vertically repeated in portion to fill the remaining space. This does not occur on the desktop computer.

The current image dimensions are 1349px by 250px.

I suspect the image height is the issue but can't find anywhere the preferred height is specified (this guidance would be useful in the where you add the files in the theme settings).

Screenshot from iPad attached.

Please help.

Thanks, Glenn.

 

Attachment image.jpg
Average of ratings: -
In reply to Glenn Sisson

Re: Elegance slideshow image height issue

by Mary Evans -

I'm not 100% sure but I suspect the problem stems from this line which has been blocked so is no longer active...

https://github.com/thedannywahl/moodle-theme_elegance/blob/master/style/elegance.css#L203

to test try adding it back to your site by typing the following into your Custom CSS box in Elegance general settings page...

.banner ul li { background-size: 100%}

might just fix it

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Elegance slideshow image height issue

by Glenn Sisson -

Hi Mary,

No change in effect on the iPad.

Any idea what size images we should be using??



Average of ratings: -
In reply to Glenn Sisson

Re: Elegance slideshow image height issue

by Mary Evans -

The size of the image in immaterial although yours seem to be the right height which is the main factor here.

Just a matter of interest, can you test it on this site and see if the slider works any better? It's a different slider but one that is already built into Moodle. It's my own website which I use as a test site.

Cheers

Mary

Average of ratings: -
In reply to Glenn Sisson

Re: Elegance slideshow image height issue

by Danny Wahl -

there are a number of issues with the slider mainly having to do with the carousel plugin that is used. it's on the docket to replace it:

https://github.com/thedannywahl/moodle-theme_elegance/issues/24

Average of ratings: -
In reply to Danny Wahl

Re: Elegance slideshow image: Larger screens

by KirK Chapman -

Hello Danny et.al,

Not sure where this slide show issue stands. Overall, this version seems to function very well compared with the previous iteration. Thanks for the hard work! SOOOO, I've got this issue using Moodle 2.7.2+ Bootstrap 3  2014100300  Elegance 2.7.1.00 (Build: 2014082100)

With larger viewports my slideshow image expands under the main page layout giving the appearance that the image is being clipped off from the bottom. Latest IE, FF, and Chrome perform generally the same regarding the clipping.  My image is 1600 x 283 px

In Firebug I tried fiddling with the background-size property, to no avail. 

<li id="slide1" style="background-image:
url("//ott.complianced.org/moodle/pluginfile.php/1/theme_elegance/bannerimage1/1413073349/MonumentsSlideShow2.jpg");
 float: left; width: 1423px; background-size: 100% auto;">
 I'm messing round' with the image but rather I think the issue lies with the layout responsiveness on larger screens-because:
 when I 'restore down ' the page and resize the page manually, I can see that the slideshow image actually repeats (tiles) underneath the main page layout. So what appears to be clipping is actually the slide show image enlarging underneath the main page (the green area in my screenshot.). I can describe the problembig grin but I have no idea how to technically address the code to make the adjustment sad 
Could you suggest a place to start?
Thanks.
Peace
Attachment Elegance-slid-show-resolutions.png
Average of ratings: -