Carousel Item exceeding height..or height not adjusting to carousel item

Question

https://topqna.herokuapp.com/

The text is missing in each carousel item, each time i have to manually adjust the carousel height and add < br> to get it to work but every day's text length might be different. Is there an automatic way so that the the entire text is visible while also the gap between navbar and item is fixed. Here's the html (albeit as a django template)


{% load staticfiles %}
{% load static %}
{% load index %}

<html lang="en">
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="{% static 'style.css' %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<nav>
    <div class="container nav-wrapper">
        <div class="flex-container">

        <h class="brand-logo center"><b>Today's Q/A</b></h>
        <ul id="nav-mobile" class="Center">
            <li><a href="/"></a></li>
        </ul>
    </div>
    </div>
</nav>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script>
    $(document).ready(function(){
    $('.carousel').carousel();
    });

autoplay()
function autoplay() {
    $('.carousel').carousel('next');
    setTimeout(autoplay, 4500);
}
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
{#<section class="black">#}

<style>
html,
body{
  background-color: #FEDCC8;
}
 .flex-container {
  display: flex;
       flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
</style>

<div class="flex-container">

    <div class="container-fluid">
    <a class="btn waves-effect waves-light" href="/kiddinglol">Cute Cat Pic <3
    <i class="large material-icons left">sentiment_neutral</i>
    <i class="large material-icons right">sentiment_very_satisfied</i>
    </a>
    </div>

    <div class="container-fluid">
    <a class="btn waves-effect waves-light" href="/iamonceagainsaying_your_net_sucks_sry"> C O Z Y
    <i class="large material-icons left">favorite</i>
    <i class="large material-icons right">favorite</i>
    </a>
    </div>

    <div class="container-fluid">
    <a class="btn waves-effect waves-light" href="/iamonceagainsaying_your_net_sucks_sryy"> Trippy Earth
    <i class="large material-icons left">camera</i>
    <i class="large material-icons right">flight_takeoff</i>
    </a>
    </div>
    </div>

{#</section>#}
<style>
.carousel
{
  **height: 1500px** !important;
}

.carousel-item
{
  display: flex;
    {#margin-top: -5%;#}
    width: 1050 !important;
    **height: auto**! important;
  align-items: flex-start  ! important;
  justify-content: space-evenly! important;
}

</style>
<br>
<br>

<div class="container carousel">

{%for a, b in x|zip:z %}

    <div class="carousel-item black lighten-2 white-text" href="#">
      <div class="container">
      <br>

        <h3 class="align-center">{{a}}</h3>
       {% for i in b %}
          <p>{{ i }}</p>
           {%  endfor %}
            <div class ="container">
                <a href="/wubbalubba">
                <h3 class="">          dank meme 4 u           </h3>
                <br>
            </a>
            </div>
      </div>
    </div>
  {% endfor %}


</div>
<style>
   a[href="/iamonceagainsaying_your_net_sucks_sry"] {

  margin: auto;
  padding: 0 50px;
  display: inline-block;
  position: relative;
  text-decoration: black;
  color: navajowhite;
  width: auto;
  overflow: hidden;
  z-index: 2;
  transition: all .5s ease;

}

a[href="/iamonceagainsaying_your_net_sucks_sry"] h1 {
  z-index:2;
  position:relative;
}

a[href="/iamonceagainsaying_your_net_sucks_sry"]:hover {
  color: white;
}

a[href="/iamonceagainsaying_your_net_sucks_sry"]:hover:before {
  right: 30%;
    opacity: 1;
}

a[href="/iamonceagainsaying_your_net_sucks_sry"]:hover:after {
  left: 0%;
    opacity: 1;
}

a[href="/iamonceagainsaying_your_net_sucks_sry"]:before {

  opacity: 0;
  content: '';
  display: block;
  position: absolute;
  background: white;
  width: 100%;
  height: 100%;
  top: 0;
  right: 100%;
    transition:all .6s ease;
}

a[href="/iamonceagainsaying_your_net_sucks_sry"]:after {

    opacity: 70;
  content: "click bitch";
  display: block;
  position: absolute;
  background: white ;
  width: 100%;
  height: 100%;
  top: 0;
  left: 100%;

    transition:all .5s ease;
}
</style>

        </div>
    </div>

  </div>


</div>

</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
   var elems = document.querySelectorAll('.carousel');
   var instances = M.Carousel.init(elems, {
     indicators: true,
     padding: 200,
   });
 });
</script>


{#    </form>#}

    {% block content %}

    {% endblock content %}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

What browsers and devices? Do you think it should be solved with CSS? — jqueryHtmlCSS, Dec 14 '20 at 06:56

score 0 · Answer 1 · answered Dec 14 '20 at 06:59

0

There is no way to have the carousel item assume the height of its contents while using position: absolute. This post has a couple alternatives you can use: Position: absolute and parent height?

thank you for dank mem

answered Dec 14 '20 at 06:59

Leo Vinogradov

16
2

lulzz, ty will try. – Shivam Anand Dec 14 '20 at 09:42

Carousel Item exceeding height..or height not adjusting to carousel item

1 Answers1