CODEWITHSUNDEEP
javascripthtmlcss
user3731438
user3731438

Reputation: 283

Adding left and right borders to slick slider

I have a slick slider and i am trying to add a dashed border to the left and right of the content.

Here's a plunker: http://plnkr.co/edit/4iejdteLKFUo8ECQLpuh?p=preview

I have 2 issues:

  1. The right border is not showing
  2. There is not enough padding between the border and the text

How can i fix the above?

HTML:

<div class="container">
    <div class="grid-wrap">
      <div class="grid-col one-eighth">
        <div class="your-class">
          <div class="text-box">test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1</div>
          <div class="text-box">test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2</div>
          <div class="text-box">test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3</div>
          <div class="text-box">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>

CSS:

.text-box {
    border-left: 1px dashed white;
    border-right: 1px dashed white; 
}

Image of border right issue:

border right issue 1

Upvotes: 1

Views: 1736

Answers (1)

Paco
Paco

Reputation: 129

I corrected your plunk. http://plnkr.co/edit/alurwdlyicnLw3BBN1VQ?p=preview

I simply added a padding to the .text-box class

.text-box {
  border-left: 1px dashed white;
  border-right: 1px dashed white;
  padding: 30px;
 }

I also changed the grid-wrap width to 70% + 6px (all borders combined)

.grid-wrap {
  width: calc(70% + 6px);
}

Like this you are able to change the padding and you are able to see all borders. Keep in mind that if you change the border width you also must change the + xp.

Upvotes: 1

Related Questions