CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Sam Roberts
Sam Roberts

Reputation: 71

Bootstrap element leaving responsive card

I have this issue, I've got two triangles that are to be side by side and have. a little gap, However on resize they move about freely and don't stay inside the card.

How would I go about fixing this?

Heres the JS Fiddle:

https://jsfiddle.net/vnpoL6t0/

Heres the code:

.uppertri{
      -webkit-clip-path: polygon(100% 0, 0 0, 0 100%);
    clip-path: polygon(100% 0, 0 0, 0 100%);
    width: 217px;
    height: 217px;
}
.lowertri{
      -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    width: 217px;
    height: 217px;
    position: absolute;
    left: 3rem;
    top: 1.7rem;
}

<div class="row">

        <div class="col-md-3 col-sm-6">
          <a class="wood" href="/get_wood/1">
          <div class="card">
            <!-- <div class="premium"></div> -->
            <div class="card-body" align="center">
                <img class="uppertri" src="https://loremflickr.com/320/240" alt="Logo">
                <img class="lowertri" src="https://loremflickr.com/320/240" alt="Logo">
            </div>
          </div>
          </a>
        </div>

        <div class="col-md-3 col-sm-6">
          <a class="wood" href="/get_wood/2">
          <div class="card">
            <!-- <div class="premium"></div> -->
            <div class="card-body" align="center">
                <img class="uppertri" src="https://loremflickr.com/320/240" alt="Logo">
                <img class="lowertri" src="https://loremflickr.com/320/240" alt="Logo">
            </div>
          </div>
          </a>
        </div>

      </div>

Upvotes: 0

Views: 80

Answers (1)

Zuber
Zuber

Reputation: 3473

You need to remove fix height and fix width so that you can scale images while resizing

you can set right instead of left in lowertri and set uppertri to left: 0 if you want. so that both triangles stay inside the div

.uppertri {
   -webkit-clip-path: polygon(100% 0, 0 0, 0 100%);
   clip-path: polygon(100% 0, 0 0, 0 100%);
   position: absolute;
   left: 0;
   top: 0;
   width: 50%;
 }
.lowertri {
   -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
   clip-path: polygon(100% 0, 0 100%, 100% 100%);
   position: absolute;
   right: 0;
   bottom: 0;
   width: 50%;
}
.card-body {
  min-height: 170px;
}

Upvotes: 1

Related Questions