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.
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 can absolute position an element under the POSITION section.
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.
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/
- 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!
All I see available are 'picture' and 'button'.
Thanks again for all your help.
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.
Russ in a sunny but frosty UK
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.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.