Support » Plugin: Smart Slider 3 » change height slider

  • Resolved duboi

    (@duboi)


    hi,

    i want to reduce the heigh of my slider
    i don’t see in setting and i try a css, it doesn’t work
    size in slider, change the heigh of the photo but not the container
    thanks

    • This topic was modified 8 months, 2 weeks ago by duboi.

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Nextend Support – Ramona

    (@nextend_ramona)

    Hi @duboi

    Here’s how the slider height works in Smart Slider:
    1. First, the height is based on the “height” value at Slider settings > Size:
    https://smartslider.helpscoutdocs.com/article/1774-slider-settings-size
    At your slider I think you use 960x720px slider size.

    1.1
    With the default settings (Limit slide width enabled, using none of the custom sizes next to it) when the slider is wider than 960 it keeps the set 720px height. So, on a fullHD screen your full width slider has 1920x720px height.

    1.2
    If you use a custom Limit slide width (e.g. by enabling the Desktop option) and set a different value there, that can allow the slider to be taller than the set slider height.
    Example:
    Slider size: 960x720px
    Limit Slide Width – Desktop: 1200px
    This means that the slider heigth will be increased until the slider reaches 1200px width, keeping the original ratio (set by the slider size). So at 1200px the height of the slider is 900px, and that height stays after the slider gets wider than 1200px.
    On a fullHD monitor the slider with the settings above will have 1920x900px height.

    1.3
    If the Limit slide width is disabled, the slider scales up keeping the orignal ratio the slider size sets. So a 960x720px slider will be 1920x1440px on a fullHD monitor.

    2.
    If the content on the slider needs more vertical space, that can increase the height of the slider as well. A typical example of this is the mobile views. On a phone limited width is available, so the content needs more vertical space due to texts breaking into more lines. So if you have at least one slider that needs
    The way Smart Slider works is that it uses the same height for every slide. So if you have at least one tall slide, it will increaes the height of all other slides as well.

    So in your case what I can recommend:
    1) For desktop
    Turn on the Limit Slide Width and make sure the Desktop, Tablet and Mobile custom sizes are disabled. This will make your slider keep the given 720px height. If that’s still too much, reduce the slider height:
    https://smartslider.helpscoutdocs.com/article/1774-slider-settings-size
    2) For mobile
    The content on your “Tout l’univers du Dirt Bike Découvrez la gamme YCF 2021” slide seems to increase the height of the slider due to the lenght and font size of this text. I recommend reducing the font size using the Font resizer:
    https://smartslider.helpscoutdocs.com/article/1765-slide-editor#layer

    Thread Starter duboi

    (@duboi)

    OK THANKS FOR YOUR FULL ANSWER but I just wanted to reduce the overall height to 400 px for the desktop and have it reflected in responsive design.
    Reading your answer; I don’t feel like we can do this intuitively
    maybe I didn’t understand

    Plugin Support Nextend Support – Ramona

    (@nextend_ramona)

    Hi @duboi

    If you just want 400px height, then set the height to 400px at Slider settings > Size tab > under Slider size: Height:
    https://smartslider.helpscoutdocs.com/article/1774-slider-settings-size
    And make sure only the Limit slide width is enabled in the row below this option.

    As you see here:
    https://imgur.com/8NcmMo4
    This will make the slider height 400px.

    To ensure the texts can fit properly on mobile, you might need to use the Font resizer on mobile:
    https://smartslider.helpscoutdocs.com/article/1765-slide-editor#layer

    We’ve got a tutorial video that shows how to check the mobile view for editing, if you wouldn’t know that yet:

    It also shows the usage of the Font resizer.

    Thread Starter duboi

    (@duboi)

    the image is become small
    the image does not adapt to the new size,
    it is not in full width

    when I use other sliders it happens automatically

    Thread Starter duboi

    (@duboi)

    exemple

    • This reply was modified 8 months, 2 weeks ago by duboi.
    Plugin Support Nextend Support – Ramona

    (@nextend_ramona)

    Hi @duboi

    It’s based on the “Slide background image fill” option: https://smartslider.helpscoutdocs.com/article/1809-slider-settings-slides
    how your images look like in the slider. By default the “fill” option is used which will make the image as big as it needs to be to cover the whole slider. This means that if the slider and image ratios differ, the image will be cropped.

    Currently you’re using “fit” mode which means the images won’t cover the whole slide area, but they’ll fit into the available slider size without any kind of cropping. If the slider and image dimensions don’t match (like yours don’t) there will be empty spaces around the image.

    If you want the images to cover the slider you should switch back to the “fill” mode.

    The Fill mode can be changed at the slide level, at Slide > Style tab: https://smartslider.helpscoutdocs.com/article/1724-slide#image
    make sure you have “Slider’s default” selected there.

    Thread Starter duboi

    (@duboi)

    ok thanks it work perfect

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘change height slider’ is closed to new replies.