I am new to CSS and currently experimenting with the Slick slider on a project:
My setup involves a div container that spans 100% of the width of the page. Inside this container, there is another div (housing the slider) that takes up 80% of the width.
Despite this, I'm facing issues trying to center the div on the page and also encountering problems with the visibility of the left button.
Here is the HTML structure:
<div class="container">
<div class="grid-wrap">
<div class="grid-col one-eighth">
<div class="your-class">
<div>test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1</div>
<div>test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2</div>
<div>test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3</div>
<div>test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4</div>
</div>
</div>
</div>
</div>
For CSS styling:
.container {
width: 100%;
/* margin-left: 40px; */
}
.clearfix: before, .clearfix: after, .container: before, .container: after {
content: " ";
display: table;
}
.clearfix: after, .container: after {
clear: both;
}
.container {
margin-left: auto;
margin-right: auto;
}
.grid-wrap {
margin-left: -3em;
/* equal to gutter size */
overflow: hidden;
clear: both;
}
.grid-col {
float: left;
padding-left: 3em;
/* defines gutter between columns */
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 150px;
}
.one-eighth {
width: 80%;
}
You can view a demonstration of the issue in this Plunker link: http://plnkr.co/edit/q7eN9wYbbSjq13reLDdD?p=preview
This task has been quite challenging for me. Any help would be greatly appreciated!