Bulma CSS responsivness not working with Bulma Carousel or Images - html

Question

I have created a website using the Bulma CSS framework for the styling. I also used the Bulma Carousel for a text carousel. I used the column feature in Bulma to have a carousel on the left of an image/video. This was working perfectly on my screen, until I wrapped the images in a tag with the class "image is-16by9" Now, the images are below the carousel. In addition, when the browser get small enough or I'm on mobile, the images get huge.
The goal is to have the images below the carousel and be scaled correctly on smaller devices and be larger and next to the carousel on desktops, along with the carousel.
.slick-prev::before,
.slick-next::before {
color: black !important;
}
.carousel {
overflow: hidden;
}
<section data-aos="fade-up" id="rendering" class="hero is-fullheight child">
<div class="hero-body">
<div class="container">
<div class="content is-large">
<h3>Title Here</h3>
<div id="columns is-vcentered">
<div class="column is-7">
<div class="3dCarousel">
<div class="item-1">
Item 1
</div>
<div class="item-2">
Item 2
</div>
<div class="item-3">
Item 3
</div>
</div>
</div>
<div class="column">
<figure class="image is-16by9">
<img
src="./images/render.png"
alt="Render"
/>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
The code gets an okay result on desktop, expect the images don't scale and aren't next to the carousel. I've been playing around with different fixes for a while but they either mess something else up or don't work at all.

Answer 1

Try adding is-mobile and is-multiline to your columns class