Change your slider image height to 630px. It should place the whole container within 100vh. #slider { height: 630px }. Another tip: If you are using flexbox. You don’t need absolute positioning for footer in this case.
Solution 1 :
Problem :
I wanted the social media icons to be visible without scrolling. This has worked before, is there a reason it’s not? It doesn’t seem to be the images taking up space.
I placed min-height:100vh on .container, HTML and body tag I didn’t see any results. I changed the size height images and that also didn’t get my desired result.
html {
height: 100%;
}
body {
background-color: #e2e2e2;
font-family: "Montserrat", sans-serif;
font-weight: 500; }
/* min height */
.container {
white-space: nowrap;
min-height: 100vh;
} <div class="container"><nav>
<div class="site_header">
<a href="index.html"><img alt="nav logo" class="logo" src="https://i.imgur.com/1SxQJfI.png"></a>
<div class="right">
<div class="class_button">
<a class="">CLASSES</a>
</div>
<img alt="menu button" class="menu" src="https://i.imgur.com/beUooBz.png">
</div>
</nav>
<div id="slider">
<div class="slider_child" id="slider_child">
<div class="image_con" style="left: 50%; opacity: 1">
<img src="https://i.imgur.com/xvYImiF.png" class="img1" />
</div>
<div class="image_con" style="left: 40%; opacity: 0">
<img src="https://i.imgur.com/hYnjyMy.png" class="img2" />
</div>
<div class="image_con" style="left: 40%; opacity: 0">
<img src="https://i.imgur.com/kGZ5oCv.png" class="img3" />
</div>
</div>
<!--ARROW AND TEXT ISSUE -->
<a class="slidenext" onclick="nextSlide();">
<img src="https://i.imgur.com/GASeP9Y.png" class="arrow_icon" />
<div class="grow">GROW</div>
</a>
<a class="slideprev" onclick="prevSlide();"><img src="https://i.imgur.com/WLkS6Jk.png" class="arrow_icon" />
<div class="shift">SHIFT</div>
</a>
<div class="title_holder">
<div class="title lineheight">
IR
</div>
<div class="title lineheight">
REG
</div>
<div class="title">
ULAR
</div>
<div class="button">
<a class="learn_more">LEARN MORE</a>
</div>
</div>
</div>
<!-- footer social media and slideshow numbers-->
<p>
#follow us
</p>
<div class="footer">
<img src="https://i.imgur.com/rCkPv9i.png alt="instagram link" class="social_icons ig" />
<img src="https://i.imgur.com/9rmiZY1.png" alt="facebook link" class="social_icons" />
</div>
</div>
</div>
</div>
Comments
Comment posted by Temani Afif
there is no container in your code