Slider (Stacked) "Cover" not working?

[mcaravaglia]

Please see attached capture.

I’m sure it’s something I’m not doing right, but I cannot seem to get the images in my slider to fill the window on Mobile. If you look at the capture, it shows that the image is showing fully in the width, but too short in the height, even though it is set to “Cover”. The image is 980 wide x 1254 tall so it should be filling the height and cropping the width. No matter what setting I use for “Object Fit” (Cover, Contain, Fill, etc.) the results are exactly the same and nothing changes.

The other setting I cannot seem to make work is “Position”. It is set by default to 50% 50% which I assume is the same as position centered. However, no matter what numbers I use here, nothing changes.

I’ve read the document page on Sliders and even viewed the video on YouTube but cannot find the answer. Please bail me out once again.

Thank you.

[ruenel]

Hello @mcaravaglia,

Thanks for writing in! Those settings apply to the Image element only. It will not affect how it displays inside the Slide Container. If your Slide Container is higher than the height of the image, the Image element will NOT be stretched to cover the slide. It is best to put the image as a background for the Slide Container.

Please provide us with the URL of the page so we can inspect your slider.

Thank you.

[mcaravaglia]

Login credentials below. This is a staging site at the moment.

The “Slide Container” does not have the option to add an image background, unless I add a class to it and use CSS(?).

I tried adding the image to the “Slide” Background, but nothing appeared. The only way I can get an image to display is to add an image to the slide.

Please note; this slider is added on the “Home” Page (Not “Home-Page”). It is in the Section named “Mobile Slider” and in the Row named “Row Slider”. Currently, there is only a single image slide. No sense in adding additional slides if until I can get the first one to appear correctly.

Also, this slider is only intended to show on Tablet and Mobile, so it does not appear on a large display, as I have applied CSS to hide the Mobile Section on larger displays.

[ruenel]

Hello @mcaravaglia,

Actually, you are referring to an empty space already which is outside the section.

What you can do to utilize the empty space is to set the height of your Image element to 100vh.

Best Regards.

[mcaravaglia]

Hmmm, thank you, I will do this, but this is what “Cover” should achieve, no? If I create a div and add a background-image with CSS, setting the size to “Cover”, it will fill the height and crop the width.

[ruenel]

Hello @mcaravaglia,

If you use “Cover”, the image will be zoomed in/out to cover the entire Div element or container. your image will be cut off and you may not like it because some parts of your image are cut off.

Cheers.

[mcaravaglia]

Thank you; however, my concern is that selecting Cover did nothing. My original question is in regard to this. When considering the dimensions of the image and the way Cover is supposed to work, the image should have filled the height and cropped the width. That is what Cover is supposed to do. The issue is not whether I will like the results, or not.

Because 100VH in the height setting works, it is a non-issue at this time, but it doesn’t explain why selecting any setting in the size field (Cover, Contain, FIll, etc.) makes no changes to the image.

[ruenel]

Hello @mcaravaglia,

Selecting Cover, Contain, FIll, etc. will work on the Image element relative to the height of that image. By default, the Image element container is set to auto, so whatever the height of the image that would also be the height of the Image element container. This might be confusing but we will look into the output of the Image element structure:

<span class="x-image e6-e24 m6-x m6-10">
    <img src="https://example.com/filename.jpg" width="980" height="1254" alt="Image Alt">
</span>

By default, the height of <span> which is the Image element container inherits whatever the height of the <img> element. So if you have inserted the Image element in a slide and would the image to cover the whole slide area, you will have to set 100% in your Image element. The 100vh only applies if you want the image to display on the entire height of the screen.

Hope this helps.

[mcaravaglia]

I apologize, but I have tried every possible setting to make the images fill the height of the display at 100% of the image size and crop the width. Nothing works for me. I have tried using 100% for the height of the “Slide Element” and I have tried using 100VH; no change. I then tried these same settings for the height of the image. No change. I also tried setting both the Slide Element and the image to each of these settings and again no change.

When you mention the “Container” I am assuming the “Slide Element” is the container you are referring to?

[ruenel]

Hey @mcaravaglia,

Yes, that is correct. Please check out the link in the secure note below. The last section is a demo for you.

Hope this helps.

[mcaravaglia]

Thank you for the work you have done; it is appreciated. However, this still does not give me the expected results. We can close this request, as I need to deliver this slider to the client and I will not use the X-Pro Slider, but will create my own Slider with CSS and/or JavaScript.

To begin, I have no understanding why the need to enter a min-height on the container- and the entry of “calc(100vh - (5em +42px))” makes no sense to me. I have not the slightest idea of how this number was derived? Perhaps it is my lack of experience…

My issue is with mobile displays and getting the slider to adjust to fit the various viewports. I have attached four images that show the difference between the demo slider you built and a simple CSS Slider using animation.

I used two different devices to show you the results. A Samsung S22 smart phone and an iPad. I have named the screen captures with X-Pro in the name for the ones that came from your demo slider. The ones names with “CSS” are captures from a CSS slider I created. You can see that the CSS slider images adjust to fill the viewport of all devices. The X-Pro slider works on the Samsung S22, but not on the iPad. There are a number of mobile devices, with a wider viewport width that will not work with the X-Pro slider.

Certainly, on my CSS slider, I still need to do some media queries to optimize for some of the device viewports, and I need to perfect the transitions, but at least the CSS slider functions properly when using “Cover” to ensure the images fill the viewport.

[ruenel]

Hey @mcaravaglia,

The value calc(100vh - (5em +42px)) is added so that the image area will fit on the screen including the first row and some spacing. This is only for the height so, in some screen sizes, it will still not look good. You may need to adjust the width of the image area as well. I know this must be confusing and get more confusing with the way I have explained it. The best alternative I can give is just by using the image as a background of the slide with the height setting of the slide to have 100vh. This way, the image will always cover the slide area. It may crop the image though but still, it does not give away empty space unlike if you use an Image element which is why you were having an issue with it.

Best Regards.

[mcaravaglia]

Thank you Ruenel.

[ruenel]

You are most welcome.

[mcaravaglia]

So you are aware, the settings you have provided (see quote below) absolutely do not work in vers. 6.0.5.

It is a non-issue for me at this stage, as I have built the slider with CSS animation and it functions perfectly. It also fills the window correctly on all devices by simply using “background-size: cover;” (I have checked 18 different viewport widths). I would, however, like to be able to use the built in slider for future websites I build with X-Pro.

“The best alternative I can give is just by using the image as a background of the slide with the height setting of the slide to have 100vh . This way, the image will always cover the slide area. It may crop the image though but still, it does not give away empty space unlike if you use an Image element which is why you were having an issue with it.”

[ruenel]

Hi @mcaravaglia,

I am aware that the setting I gave may address the cover issue. It does not matter if the theme version is 5.1.5, 6.0.5, or the latest. We may not be on the same page here. I think, when you say that the " Slider (Stacked) “Cover” not working", you thought that the “cover” object-fit property of the image will make the image cover the whole screen. Again, you must consider the height of the image. If the image height is smaller than the height of your screen, it will NOT cover the screen even if you have a big image dimension. Take for example, you have the following:

• Phone resolution: 480x853
• Image dimension: 632 wide x 1254 tall

Structure:

Image element setting:

Demo:

• A Slider Test | X Test (dev-xsupport.pantheonsite.io)

I added a red background color to my slider wrapper Div element so that we can see where are the bounds of the slider. If you check the image in Slide #2, the image is only 313x627 pixels. It does not cover the slide because the “cover” attribute only applies to the Image element container and not to the Slide since we have this Image element structure:

<span class="x-image">
    <img src="https://example.com/filename.jpg" width="313" height="627" alt="Image Alt">
</span>

The x-image container will also have a dimension of 313x627 pixels while the slide area is 480x853 pixels.

The background-size property works the same way as with the object-fit.

• Need general help to style a page - Support - Themeco Forum

Anyways, I guess this response no longer applies since you have gone a different route in accomplishing what you have in mind.

Best Regards.