I KNOW I need breakpoints Scott - that's not the point.

And you DO have white space under the slides at your link when you take it down to phone size. Watch the space grow underneath when you reach your breakpoint. That is EXACTLY what I'm trying to get rid of.

Perhaps this will help. I made a short video. In it I show with the mouse pointer the space I'm trying to eliminate.
http://screencast.com/t/0J0Q3cRR

The problem is that it can push my page headline below the fold (depending on screen resolution).

My guess is that you will say to change the max-height at each breakpoint, but this doesn't eliminate the issue - it just means I would need a lot of breakpoints.

I think the real solution is to display the images as elements instead of backgrounds. My problem with that is I don't know how to get the text elements to display ON TOP of the image elements, which is what I was asking for help with in the first place!

You didn't use the project file I sent you Terry. There is no whitespace. Here is a screenshot from my iPhone.




You can absolute position an element under the POSITION section.

I tried using absolute position for the text elements Scott, but I'm finding that the animations don't seem to function properly. For example. if a "slide in right" is used without absolute, it comes in from off the screen. But if it's in an absolute position, the slide-in starts from a visible area of the screen. Other animations are similarly affected - they just don't look right.

Terry,

If it was me, I would probably just use the images as background elements and then set the size to 'cover'. You may need to adjust the crop but I think you get better results this way. You can also use different images for each breakpoint which would help the placement of the photos for each breakpoint. Look at the first slide to see what I mean.

When you are using very wide images you will either need to crop a lot OR have the images get very short when viewing on mobile devices. This is where using special images for each breakpoint will help. I did not make custom cropped images for this test, fyi.

Jeff

Thanks for that Jeff. I don't really like 'cover' because it hides parts of the image as it reduces in size, but I'll compromise with that for now so I can move on.

A couple of follow up questions:

• When you say 'crop' the images, are you referring to cropping it prior to importing it into RCS, or is there a way to do that within the app?
  
• How can I make the entire slide clickable? I see that I could use 'picture link' if I was using images as elements, but I don't see how to do it with a background image. Also, that would loop me back to my original dilemma!

Here's my current effort: https://patiopads.com/test-slider/

Thanks,
Terry

- Yes, crop the images in an image editor so they fit the proportions of your container for each break as needed.

- I'm not sure if there is a way to make the entire slide clickable without using a picture link or some other link container that covers the entire area.

The reason why I say use cover is that it lets you never worry about white space. The image you are using is very wide proportion wise. So if you want the entire image to be seen you will end up with an extremely short image on mobile devices. I would prefer to use a cropped version that is more appropriate for smaller screens and one for medium screens as well. Doing this with the use of cover (and selecting how it positions) lets you always have the image fill the container and also look good based on your custom crops for smaller screens, etc. That's just my personal opinion... no correct answer here though!

Do you have a suggestion for "some other link container"?
All I see available are 'picture' and 'button'.

Thanks again for all your help.

I think those are the only two link containers, Terry.

Jeff
Happy New Year and many thanks for doing your two videos on using the slider. They are very helpful. I hope you find time to produce more especially about using the picture style and using animation on them without increasing the size of the individual slide.
Thanks again.

Russ in a sunny but frosty UK

If you want the whole picture to be clickable then you will have to use picture link. Using the background image will not work.

You should assign a unique id to everything. Do not duplicate slides also to add additional slides. Add new slides and assign it a new id like slide2id etc. When adding elements add a unique id also. Headingslide1id etc.

If you do this then you can animate properly by id rather than class anything in the slideshow individually.

Once you add headings to your slide and id them you will have to change the position to absolute like Scott indicated to move the headings onto the picture. Use one up or down (uncheck auto) and one left or right to adjust where you want it.

Once you have the headings over the picture hover over the picture and see what the size is in the inspector. Then go hover over the slide container thats holding it and see if the size is the same. Adjust it to the picture size or else you will have extra blank area unused in the slide container.

Remember....when animating.....choose to animate by id. Hope this helps. Practice makes perfect.