Full slider width and limited height

Question

I believe that I have tried everything and I am failing. I worked with a lush responsive slider and had some serious problems.

To get started, I took the exact code from the demo and placed it in my header, but it had a strange addition on the bottom and right side, so I deleted it and thought it worked fine except for the height. It is so large that it occupies more than half the page.

When I resized the window and reloaded the page, although the background of the slider was in the upper left corner much smaller than necessary. So does responsiveness only work when rebooting on a 100% screen? It does not create scenes.

In addition, the height bothers me. I can not get it to resize at all, and when I set the static heights to ul and li from 10em, it resized, but then the response came out of the window.

I tried to publish this in a js script, but there was so much code in the plugin that it broke it without starting anything. If this helps, I can post the dev site with this on it. As I said, I used the exact html and css from the demo files, which I just removed a bit of indentation to make it full width.

Any help would be greatly appreciated.

Answer 1

Well, I managed to solve the solution to the width problem. The problem seems to be related to the original base width, which by default is 1140 pixels. Playing with

data-base-width="600" and data-base-height="600" 

the attributes in the first slush slider tag can see that you are making some progress, but it seems that only fixed values ​​are accepted, without percent. I chose this solution that seems to work, write the first div tag using the document.write method and programmatically set the width of clientWidth as such:

 <script> document.write('<div id="lushDiv" class="lush-slider autoload shadow-a" data-slider-pause-on-hover="true" data-base-width="' + document.body.clientWidth + '" data-base-height="600" style="background: rgb(229, 229, 229)">'); </script> 

Answer 2

My suggestion is not to use javascript or jquery. Some simple CSS and HTML will be executed.

Here is the fiddle: http://jsfiddle.net/jacobdubail/bKaxg/7/

You obviously don't need all the CSS. Just change it to accompany your layout.

Change your width to percent, for example:

 min-width: 100%; 

I would suggest changing the height to ems.