Flickity Carousel Cutting Off Bottom Half of Cell?

[S0confused]

I've made a flickity carousel used throughout my store, and it sometimes will load a page and cut off the bottom half of each carousel cell. It usually works after reloading the page, but is there a way to prevent this from happening?

<script src="{{ 'flickity.pkgd.min.js' | asset_url }}" defer></script>
<link rel="stylesheet" href="{{ 'flickity.css' | asset_url }}">

{% comment %} used this youtube vid, super helpful: https://www.youtube.com/watch?v=Wed6U3pOtN0 {% endcomment %}

<div class="container">
  <h1>{{ collections[section.settings.collection].title }}</h1>
  
  <div class="carousel">
    {% assign products = collections[section.settings.collection].products %}
    {% for product in products %}
      <a href="{{ product.url }}" class="carousel-cell">
        <div>     
          <img src="{{ product.featured_image | image_url: width: 270, height: 380 }}" alt="{{ product.title }}">
          <h4>{{ product.title }}</h4>
        </div> 
      </a>
    {% endfor %}
  </div>

 <div class="view-all">
   <a href="{{ collections[section.settings.collection].metafields.custom.releases_month_url }}" >
      <h3>View all</h3>
   </a>
 </div>
 
</div>

<style>
.container {
  margin: 5% auto;
  width: 90%;
  justify-content: center;
  text-align: center
}

/* removes the underline from links (product titles) */
.container a {
  text-decoration: unset
}

.carousel-cell {
  width: 40%;
  margin-right: 10px;
  border-radius: 5px;
  counter-increment: carousel-cell;
  visibility: hidden;
  opacity: 0.5;
  text-align: left
}

@media screen and (min-width: 750px) {
  /* half-width cells for larger devices */
  .carousel-cell { width: 20%; }
}

/* sets cell image to 100% width of carousel cell */
.carousel-cell img {
  max-width: 100%
}

.carousel-cell.page-loaded {
  visibility: visible;
}

.carousel-cell.is-selected {
  opacity: 1
}

.flickity-button:hover {
  background: #FAF3F6
}

.flickity-button-icon {
  fill: #812B2B
}

.flickity-page-dots {
  bottom: -5px;
}
  
.flickity-page-dots .dot {
  background: transparent;
  border: 1px solid #812B2B;
  opacity: 0.5
}

.flickity-page-dots .dot.is-selected {
  background: #812B2B
}

/* sets the text with h4 in a cell to only display 2 lines of text, ending with an ellipses (...) */
.carousel-cell h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

</style>

<script>
  document.addEventListener('DOMContentLoaded', function(){
    // initialize flickity
    var carousels = document.querySelectorAll(".carousel");
    carousels.forEach(function(carousel){
      new Flickity(carousel,{
        //flickity options
        draggable: true,
        freescroll: false,
        wrapAround: true,
        groupCells: '100%'
      });
    // page loaded class instance once flickity has initialized
    var carouselCells = carousel.querySelectorAll(".carousel-cell");
    carouselCells.forEach(function(cell){
      cell.classList.add("page-loaded");
    });
    });
  });
</script>

{% schema %}
  {
    "name": "Releases for Month",
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection",
      }
    ],
    "presets": [
      {
        "name": "Releases for Month"
      }
    ]
  }
{% endschema %}

[AnneLuo]

Hi, @S0confused 

Can you share your page url so that I can assist you?

[S0confused]

https://kokoroshoujoshop.com/

[namphan]

Hi @S0confused,

Please send the website link, I will check it for you

[namphan]

Hi @S0confused,

I checked and it always works fine, did you solve it?