Saved slider looks totally different on page

After starting over on the slides, it seems to be working better. The columns behave better if you create them first, then put the image or text inside. However, the way I did it before looked like it should work, as the content (image or text) was listed under the columns in the editor.

Another question: You have to set the slider size ahead of time, is there a way to make it just fit the space on the page or post they’re going into, with the height being responsive? I’m using the “boxed” layout mode, since the “full width” goes beyond the content area (overlapping widgets, etc). I would think that “full width” would be the full width of the content area the slide is put into, but apparently not.

Also, I’m trying to adjust the breakpoints, and it looks like you’re supposed to be able to move the little slider things at Settings/Breakpoints, but they don’t move, and there’s no place to manually type in a number. How do you adjust the Breakpoints?

EDIT: Okay, figured it out, you have to click on the thing that looks like a capital I, which does not slide, and then you can type the number you want. NOT very intuitive at all, it should have a typical field there to fill out.

Also, on my comment above, the “full width” option will conform to the container, if you scroll down some more on the slider/size page and uncheck “Force full width”.

• This reply was modified 3 years, 2 months ago by jamminjames.
• This reply was modified 3 years, 2 months ago by jamminjames.

Hi @jamminjames

1.) Image and text overlap each other
According to your screenshot it seems you worked with Absolute positioned layers:

• https://smartslider.helpscoutdocs.com/article/1916-slide-editing-in-smart-slider-3#absolute

that’s why your layers might overlapped each other. Absolute positioned layers are just floating on the slide and doesn’t really have an relationship to the content. Absolute position is not meant for content, but they are only for decoration.

Content should always be built with Default position:

• https://smartslider.helpscoutdocs.com/article/1916-slide-editing-in-smart-slider-3#default

For example to create a structure like the one appearing in your screenshots, the only thing you need to do is creating a Row with 2 Columns, and putting and Image Layer into the first column and a heading, text and button layer into the other column.
If you want the image to cover the entire area of the first column, then you can set the image as Column background:

• https://smartslider.helpscoutdocs.com/article/1813-column#style

however that way the image might become cropped if the aspect ratio of the column and the image differs.

2.) Adjusting the width of the image added with Image Layer:
The images added with the Image Layer try to keep the original aspect ratio of the image. If you want to adjust the Max width of these images then you can do that by clicking ( and hold ) on the dot on the left or right side of the image and drag it to the sides. But if you prefer entering it manually, you can simply select the Image layer and on its Style tab you can find the “Max Width” setting as well.

3.) Slider size:
By default the height of the slider depends on 3 things:
-the height of the content ( if your content doesn’t fit into the area of the slider, then your content will increase the height of the slider. So your slider will be minimum as tall as the content of the tallest slide. )
-the aspect ratio of your Slider size ( on the frontend the slider tries to scale up and down according to the original aspect ratio that you set as Slider size. So the Slider size is rather used as aspect ratio, instead of a fix size. )
-the “Limit slide width” setting on the Size tab. ( By limiting the width of the slider, you also limit the its height. )

If your ultimate goal is to make the slider go as high as the container, then I am sorry we don’t have an option for that, as I mentioned above the height of the slider is rather scaled according to the width of the slider and the height of the content.

4.) Breakpoints:
Yes to edit the breakpoints, you need to click on the icon that is similar to the “text” cursor type, like you see in our documentation:

• https://smartslider.helpscoutdocs.com/article/1992-breakpoints#how-to-change

Anyways I am glad you managed to find it.

Best regards,
Laszlo.