Kevin Powell - Community•7mo ago

slick slider containment issue

I'm being a complete dunce here and cannot for the life of me get the images inside this slick slider carousel to be contained inside the fixed height parent div. Can anyone point me in the direction of a fix please? https://codepen.io/mrjonoces/pen/eYamwRy

4 Replies

~MARSMAN~•7mo ago

~MARSMAN~•7mo ago

because your actual figures are nested inside two containers after the post-gallery, and so your figures aren't set to its height. also since your slick-list and slick-track don't have heights set to them, the images are being displayed based on their original sizes. I think you should just set the height to your img directly

* {
  box-sizing: border-box;
  margin: 0;
}
.post-gallery {
  background: pink;
}
.img-wrap {
  margin-right: 20px;
}
.img-wrap img {
  object-fit: contain;
  height: 500px;
  margin-bottom: 20px;
}

* {
  box-sizing: border-box;
  margin: 0;
}
.post-gallery {
  background: pink;
}
.img-wrap {
  margin-right: 20px;
}
.img-wrap img {
  object-fit: contain;
  height: 500px;
  margin-bottom: 20px;
}

I removed the flex-part since you won't need it, also the gap on flex might not work well on some browsers, specially the damned safari. so i just put the margin-bottom on your img

Jono LewarneOP•7mo ago

Amazing, thanks for your help!

~MARSMAN~•7mo ago

np :thumbup:

Gaming

Programming

slick slider containment issue