How to make Vegas slider fully responsive

Question

I got trouble with the Vegas slider to make it fully responsive. An example is provided by the author of the framework, but it doesn't show how to apply the slider to a specific div.

Actually, I want to put the slider inside a div that I will control height with @media . For now, it doesn't change height on window resize (and it does the same if I use the height property of parent's div.

Answer 1

The Vegas plugin is adding an inline style – setting the height to a fixed value – which overrides your stylesheet definition.

Try adding this after the call to vegas() :

$('.vegas-container').removeAttr('style');

---

However, the plugin author probably added the inline style for a reason so a safer solution might be to update the height in the inline style rather than removing it. For that you might instead do:

$(window).resize(function() {
  if ($('body').width() < 1000)
    $('.vegas-container').height(200);
  else
    $('.vegas-container').height(400);
});

This is assuming you have something like <div class="vegasHere"></div> and some css like

.vegasHere {
  width: 100%;
  height: 200px;
}
@media (min-width: 1000px) {
  .vegasHere {
    height: 400px;
  }
}

Answer 2

I know it is late, but may be useful for others. I was facing the issue when I was turning my mobile phone portrait to landscape. Looks like vegas plugin set the height at vegas initialization and that is fixed. This height was not updating when screen size changes.

I have seen in debugger vegas-container element takes the following css applied.

element.style {
    height: 688px;
}

It was overriding my css height that I set for my conatiner.

my-container-css {
    width: 100%;
    height: 100vh;
    min-height: 100%;
    display: block;
}

height was overriden by

    element.style {
        height: 688px;
    }

I made my height important and it worked.

my-container-css {
    width: 100%;
    height: 100vh !important;
    min-height: 100%;
    display: block;
}