right so, i would really appreciate some help here. this code is well over my head Basically the site is 976px; the slider is fitting to this at most( if i extend the site size the slider stays at this 976px.) anything under this it works well. (scales to mobile)
i want to increase the height it takes up and also i want to make it so it is width is always 100% of the users screen.
index page calling the slider
{% include 'slider' %} slider.liquid
{% if settings.slider_home_enable %} <div class="flexslider" id="heroSlider" > <ul class="slides"> {% for i in (1..6) %} {% capture slide %}slide_{{ i }}{% endcapture %} {% capture slide_link %}slide_{{ i }}_link{% endcapture %} {% capture slide_img %}slide_{{ i }}.jpg{% endcapture %} {% capture slide_img_alt %}slide_{{ i }}_alt{% endcapture %} {% capture slide_img_caption %}slide_{{ i }}_caption{% endcapture %} {% if settings[slide] %} <li> <a href="{{ settings[slide_link] }}" class="slide-link"> <img src="{{ slide_img | asset_url }}" alt="{{ settings[slide_img_alt] }}"> {% unless settings[slide_img_caption] == blank %} <p class="h3 flex-caption small--hide">{{ settings[slide_img_caption] }}</p> {% endunless %} </a> </li> {% endif %} {% endfor %} </ul> </div> {% endif %} stylesheet
/*============================================================================ #FlexSlider - jQuery FlexSlider v2.2.0 | http://www.woothemes.com/flexslider/ - Contributing author: Tyler Smith (@mbmufffin) ==============================================================================*/ .flexslider { margin: 0 0 $gutter; padding: 0; } .flexslider li { margin: 0; } .flexslider .slides > li { display: none; /* Hide the slides before the JS is loaded. Avoids image jumping */ margin: 0; position: relative; @include backface(); } .flexslider .slides img { max-width: 100%; margin: 0 auto; display: block; } .slides { @include clearfix; } html[xmlns] .slides { display: block; } * html .slides { height: 1%; } /*================ No JS Fallback ================*/ .no-js .slides > li:first-child { display: block; } .flexslider { position: relative; zoom: 1; } .flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } .flexslider .slides { zoom: 1; } .carousel li { margin-right: 5px; } /*================ Direction Nav ================*/ .flex-direction-nav { margin: 0; padding: 0; list-style: none; } .flex-direction-nav { *height: 0; } .flex-direction-nav a { display: block; width: 45px; position: absolute; top: 0; bottom: 0; overflow: hidden; opacity: 0; cursor: pointer; @include transition(all .3s ease); } .flex-direction-nav .flex-disabled { opacity: 0!important; filter: alpha(opacity=0); cursor: default; } .flex-direction-nav a { text-indent: -9999px; background: { color: transparent; repeat: no-repeat; size: 20px auto; } /*================ Hide SVG arrows in oldIE ================*/ .lte-ie9 & { display: none; } &.flex-prev { background-image: url("data:image....."); background-position: center left; } &.flex-next { background-image: url("data:image..."); background-position: center right; } } /*================ Control Nav ================*/ .flex-control-nav { position: absolute; bottom: -$gutter; width: 100%; text-align: center; margin: 0; padding: 0; list-style: none; li { margin: 0 4px; display: inline-block; zoom: 1; *display: inline; vertical-align: middle; } } .flex-control-paging li a { width: 6px; height: 6px; display: block; background-color: #ededed; cursor: pointer; text-indent: -9999px; border-radius: 20px; border: 2px solid #fff; &:hover { background-color: #333; } &.flex-active { background-color: #fff; border-color: $colorPrimary; cursor: default; } } .flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;} .flex-control-thumbs li {width: 25%; float: left; margin: 0;} .flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;} .flex-control-thumbs img:hover {opacity: 1;} .flex-control-thumbs .flex-active {opacity: 1; cursor: default;} @include at-query ($max, $medium) { .flex-direction-nav a { opacity: 1; width: 25px; } .flex-direction-nav a.flex-prev { left: 0; background-position: center right; } .flex-direction-nav a.flex-next { right: 0; background-position: center left; } } @include at-query ($min, $large) { .flex-direction-nav .flex-prev { left: 10px; } .flex-direction-nav .flex-next { right: 10px; } .flexslider:hover .flex-prev { opacity: 1; left: (-$gutter)+5; } .flexslider:hover .flex-next { opacity: 1; right: (-$gutter)+5; } } @include at-query ($min, $maxWidthBp) { .flex-direction-nav .flex-prev { left: 20px; } .flex-direction-nav .flex-next { right: 20px; } .flexslider:hover .flex-prev { opacity: 1; left: -45px; } .flexslider:hover .flex-next { opacity: 1; right: -45px; } } /*================ Captions ================*/ .flex-caption { margin: 0; position: absolute; left: 0; right: 0; bottom: 0; background: #333; background: rgba(0,0,0,.6); color: #fff; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,.3); padding: $gutter/2; } /*================ Custom Flexslider Styles ================*/ .flexslider .slides { margin: 0; padding: 0; list-style-type: none; } .slide-link { position: relative; display: block; img { display: block; } } #heroSlider { padding-bottom: $gutter*2; border-bottom: 1px solid $colorBorder; .flex-control-nav { bottom: 40px; } .flex-direction-nav a { bottom: $gutter*2; } }