Just to clarify, I am not very experienced and do not know many best practices. I am learning as I go along with projects.
I am using Swiper for a game list slider, but when I place it inside another Div, it disappears completely. I can position and size it correctly outside the Div, but it becomes unresponsive and messy that way.
Below is the section, with the schedule on the left and the game slider on the right. It appears when outside the Games Div, but vanishes entirely when inside.
https://i.sstatic.net/P4CFY.jpg
<!-- Start of schedule container -->
<div id="info-wrapper">
<section id="info">
<div id="schedule" class="container">
<div class="row">
<div class="col">
<h1 id="title"> Stream Schedule</h1>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Mondays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Tuesdays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Wednesdays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Thursdays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
<div class="row">
<div id="dates" class="col">
<h1> Fridays </h1></div>
<div class="col">
<p>9:00 - 10:00 PM </p>
</div>
</div>
</div>
<!-- Container for game list -->
<div id="games" class="container">
<h1 id="title"> What I've been playing </h1>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
<div class="swiper-slide" style="background-image:url(assets/images/box-art/fortnite.png);"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</section>
Complete CSS for main stylesheet can be found here
[CSS CODE HERE]Please let me know if I'm missing any information. Thank you for any assistance!