CODEWITHSUNDEEP
javascriptjqueryresponsive-designslider
ahbon
ahbon

Reputation: 512

How to make Vegas slider fully responsive

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.

Upvotes: 0

Views: 2431

Answers (2)

Anil8753
Anil8753

Reputation: 2735

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;
}

Upvotes: 0

Lesley
Lesley

Reputation: 1395

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;
  }
}

Upvotes: 1

Related Questions