How to fix the unit to the bottom of the slide owl-carousel when you use flexbox?


Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
42 views
codepen
Trying to make it so the button was always the bottom, near the navigation. How to do it just using flexbox clear, but somehow owl-carousel restricts the height of the block content and not the largest of slajov:
screen
5aef0e2c6743b290764305.jpeg
by | 42 views

2 Answers

0 like 0 dislike
For this, all slides must be of the same height, this can be achieved if the parent container for the slides will flex (by default, flex applies the style rule align-content: stretch that stretches the child elements height, if the horizontal flex).

Slides inside the inner wrapper .header__slider-item to add height: 100% to occupy the entire height of the parent slide. This wrapper vertical flex, because the button you can set margin-top: auto

.owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; -moz-backface-visibility: hidden; display: flex; } .header__slider-item { display: flex; flex-direction: column; height: 100%; } .header__slider-text { font-family: Lato; font-size: 1.4 rem; margin-bottom: 20px; } .header__slider-btn { padding: 21px 33px; color: #444444; font-family: Montserrat; font-size: 1.6 rem; text-transform: uppercase; font-weight: 400; border: 1px solid #444444; margin: auto 0 auto 0; transition: 0.2 s; }
by
0 like 0 dislike
You can, for example, like this: to add a couple of parameters to .header__slider-item
min-height: 320px; justify-content: space-between;
by

Related questions

0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
0 like 0 dislike
2 answers
0 like 0 dislike
2 answers
0 like 0 dislike
1 answer
110,608 questions
257,187 answers
0 comments
40,796 users