I am trying to figure out how to center my codeless slider content in the home page. The slider only contains one video but it doesn’t matter if it’s a video or single image.
I would expect the content to be centered on the page so that when resizing the browser window the content gets scaled from both sides.
Currently, when resizing, the left side of the content is aligned and scaling is performed from the right side.
I have tried all different settings from the slide itself as well as the settings found when editing the page.
I see that it can work by looking at the sample pages but I cannot figure out how to achieve this effect.
I am not referring to any text but just the video itself.
Resizing the window doesn’t resize the video but only crops it from the right side to the left. The left side and top stays in place.
This is what I get when I open the site in mobile: https://ibb.co/N9qGNfj
Is this not ok? Can you add some wp credentials in a private reply? So we can check the configurations.
The slider content in the demo is set to be in the middle. While in your slider it was set to show horizontally aligned. I changed it in Codeless Slider > Layout > Content Position, to “In middle of slide”. See screenshot: https://ibb.co/xS7mqSL
unfortunately I didn’t hear back from support anymore and I am running out of time so I had to find a solution myself.
Simply by extending the existing “video-wrap” css-class I was able to achieve the desired affect of proper video scaling for the slider content.
The extending properties can be added to the custom css code box of the theme settings:
.video-wrap video {
/* Set a min width and height of 100%. */
min-width: 100%;
min-height: 100%;
/* Setting the width and height to auto ensures uniform scaling. */
width: auto;
height: auto;
/* Center and position the video. */
position: absolute;
left: 50%;
/* Have to set the vertical transform to 0% for proper positioning. */
transform: translate(-50%, 0%);
}
I am adding this here in case any one else comes across the same issue and needs a solution.
Nevertheless the theme’s author should include this in the base code of the theme.
Also, it should be noted that there are several alignment options for using still images in the slider but there are virtually none for properly positioning video. This can definitely use improvement.
