Support » Plugin: Smart Slider 3 » sizing issues

  • Resolved JoeGP

    (@joegp)


    Not a bad plugin, but the sizing options don’t seem to work or work poorly/backwards.

    Setting the slider width and height seem to do nothing, i set it to 400px, reloaded the page, nothing changed, checked it with Ctrl+Shift+I in Chrome, slider is 720px tall, it also shows that on the ruler when editing a slide.

    So i changed the slider max height to 400px … nothing changed, this should be an absolute setting, it says maximum right in its name, but gets overwritten or ignored.

    The only thing that actually did anything was setting the height to 500px in the first slides Row height settings (it was previously set to 0, which seems to mean auto), which is a very hidden thing to find, took me way too long to find, but this was just the beginning of my sizing issues.

    (i used the Full width slider template by the way)

    So i added some text and an image, but the image gets cropped, even though on the image layers settings, Crop is set to Off (another thing that doesn’t work), width and height were set to auto, padding 20px, image still gets cropped, no responsive resizing here.

    The only way i could get it to not get cropped was to set it to a certain height, 450px in my case, but then as you go down in screen size, the image gets squished, not proportionally resized like it should, i thought that’s what the Adaptive sizing button was for, tried it with it on and off (on multiple occasions), no change, seems to do nothing.
    Tried setting a fixed width for the image, no change, image still gets squished on mobile.

    Setting any fixed dimension to the image makes the text layers on the left get pushed out of sight on mobile, the only way to make it visible is to set it to auto.

    Took me 2 hours to modify a template slider to show 2 lines of text, a button and an image without it getting cropped, pushed off page, squished, etc.

    In the end the only way i could make it look good was to set the image width and height back to auto and to set different max-widths for mobile, tablet and desktop, this is not how you make something responsive.

    Now that i set the max widths for the image, it seems i no longer need to force the row to be 500px tall, i set it back to 0 and is now 574px tall, which means the image was forcing the slider to be taller to avoid getting cropped, which means that the height and max-height settings for the slider were being ignored (they are both set to 400px).

    The whole content of the 1st slide seems to have a 30-50 pixel spacing from the top and bottom, which i can’t find where to get rid of, it’s probably caused by the images on the other 2 slides being taller. This is not smart, it’s very unintuitive.

    Would have been so much easier if i could have used Elementor instead, for the slide contents.

    Now all this could be caused by incompatibilities with my theme (Fluida), and i also have 2 other slider plugins installed (was hoping to replace them with Smart Slider 3) but i really doubt it.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Ramona

    (@nextend_ramona)

    Hi @joegp,

    The Slider size option is rather an editing size, and it also gives a basic dimension. On the page the actual slider size depends on the used Responsive mode (like full width or auto). E.g. if you set the slider to be 1200x600px and use the full width responsive mode the slider will be 1920x960px on a fullHD monitor. The 1920px width is the width of the browser, and the height scales with the width accordingly.

    If you set a maximum height, that of course can limit the maximum height a slider can go.
    There’s only one exception, when you use Content mode: https://smartslider3.helpscoutdocs.com/article/1430-tutorial-video-content-mode
    Content mode works that way that it can adjust the height of the slider based on the tallest slide. So if you have at least one slide with lots of content, that will increase the whole slider height and all slides inside. This behavior was made like this for a simple reason: to prevent the slider from cropping the content, because the set slider height turned out to be too small for the slide content to fit into it.
    As I read the middle part of your message, this is what happened to you because of your image, that was taller than necessary.

    “In the end the only way i could make it look good was to set the image width and height back to auto and to set different max-widths for mobile, tablet and desktop, this is not how you make something responsive.”

    That seems correct. The max-width setting can be used to prevent the layer from getting bigger than you want it to be on different devices.

    “The whole content of the 1st slide seems to have a 30-50 pixel spacing from the top and bottom, which i can’t find where to get rid of, it’s probably caused by the images on the other 2 slides being taller. “

    Yes, that’s correct. The second and third slides of your slider are taller, which causes them to increase the height of the whole slider.

    We have great tutorial videos which teach the basics of slide editing: https://smartslider3.helpscoutdocs.com/article/1430-tutorial-video-content-mode
    I’m not sure if you’ve watched them, but they can be great help for any users.

    “Now all this could be caused by incompatibilities with my theme (Fluida)”

    The only theme related issue I saw on your site is that basically every parent of the slider (from div#container to div.article-inner) has an overflow: hidden CSS on them, and that prevents the full width slider from reaching the edges of the browser: https://smartslider3.helpscoutdocs.com/article/183-why-isnt-my-slider-filling-up-the-screens-width#overflow-hidden-on-the-sliders-container

    Thread Starter JoeGP

    (@joegp)

    Hi Ramona,

    I figured you were gonna say something like that (“it’s not a bug, it’s a feature”), there is no way bugs like that would exist in a plugin this popular, still those features are not very intuitive and could be better explained, without having to read documentation or watch a video, i’m talking about using more information bubbles like you already have on some settings.

    Thanks for answering this fast and this detailed.

    If you set a maximum height, that of course can limit the maximum height a slider can go. There’s only one exception, when you use Content mode

    would be nice if it said: (doesn’t apply in Content Mode) next to it, also a little info bubble next to the Content/Canvas mode selector explaining the differences would be nice, or at least linking to a page where it’s explained, i’m sure you have one of those pages.

    How easy and intuitive something is to use gets lost for people who know the ins and outs of it.

    I like things i can use without wasting an hour reading the manual first and constantly referring back to it until i learn it’s unintuitive and poorly labeled quirks, for example i ditched Adobe Premier for Wondershare Filmora, it’s so much easier to use.
    This isn’t even my first time using this plugin, or my second, or third.

    The only theme related issue I saw on your site is that basically every parent of the slider (from div#container to div.article-inner) has an overflow: hidden CSS on them, and that prevents the full width slider from reaching the edges of the browser:

    hmm i didn’t even notice that, but now that i look at it, i see it, if i zoom out a little.
    The Force Full width option is enabled and the horizontal mask set to body, but neither HTML or none work either.
    Setting the “Adjust slider width to parent selector” to body or html also doesn’t work.

    But this might not be because of the theme, but the page template and since the page the slider is on was made in Elementor i set it to use it’s own Full Width template and that fixed it.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘sizing issues’ is closed to new replies.