How can I add a footer to a flex-container? - css

Question

I'm trying to add a bootstrap footer to my project. It works well on the big screen but when you start scaling down the screen, the footer is placed in the middle of the page instead of the bottom. What am I doing wrong?
#media only screen and (max-width: 1150px) {
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
}
<div class="bigcontainer">
<div class="box1">
<h3>RENOVATIONS</h3>
<p><br /></p>
<p>
At <em>Razca Designs</em>, we specialize in interior renovation design, from small kitchen updates to complete home remodels. We have a wealth of experience and expertise in creating personalized spaces that reflect our clients’ unique styles and
personalities.
</p>
<p><br /></p>
<p>
Our team will work closely with you every step of the way to bring your project to completion. We take the time to fully understand the specific challenges and pain points of each client in their current home, and use this information to design a tailor-made
solution that addresses each individual need. Our approach is to provide you with a beautiful and functional home that you’ll love spending time in
</p>
<p><br /></p>
<b><em>Our passion is creating personalized, welcoming spaces that are tailored to you and your family. With Razca Designs, you can trust us to transform your home into a space that exceeds your expectations</em></b>
</div>
<div class="box2">
<img src="textimages/reno10.jpg" alt="" class="img-fluid" />
</div>
<div class="box3">
<img src="textimages/renov-3.jpg" alt="" class="img-fluid" />
<img src="textimages/ren101.jpg" alt="" class="img-fluid" />
</div>
<div class="box4">
<h3>RENOVATIONS</h3>
<p><br /></p>
<ul class="ab">
<li>
Reviewing permits or managing permit applications if necessary
</li>
<li>reate the neceesary drawings, including:</li>
<p>Existing and demolition plans</p>
<p>Proposed plans</p>
<p>Construction plans</p>
<p>Electrical plans.</p>
<p>Furniture Plans</p>
<li>
Providing materials and finishes according to your design palette
</li>
<li>Design of custom furniture</li>
<li>Requesting quotes; ordering and coordinating deliveries</li>
<li>Dealing contractors and craftsmen</li>
<li>Dealing with suppliers and overseeing quality control</li>
<li>
Final design steps, like finishes and confirming forniture and cabinetery.
</li>
</ul>
</div>
</div>
<!-- Footer -->
<footer class="text-center text-lg-start bg-white text-muted">
<!-- Section: Social media -->
<section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
<!-- Left -->
<div class="me-5 d-none d-lg-block">
<span>Get connected with us on social networks:</span>
</div>
<!-- Left -->
<!-- Right -->
<div>
<a href="" class="me-4 link-secondary">
<i class="fab fa-facebook-f"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-twitter"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-google"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-instagram"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-linkedin"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-github"></i>
</a>
</div>
<!-- Right -->
</section>
<!-- Section: Social media -->
<!-- Section: Links -->
<section class="">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4">
<i class="fas fa-gem me-3 text-secondary"></i>Company name
</h6>
<p>
Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Products</h6>
<p>
Angular
</p>
<p>
React
</p>
<p>
Vue
</p>
<p>
Laravel
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Useful links</h6>
<p>
Pricing
</p>
<p>
Settings
</p>
<p>
Orders
</p>
<p>
Help
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>
<p>
<i class="fas fa-home me-3 text-secondary"></i> New York, NY 10012, US
</p>
<p>
<i class="fas fa-envelope me-3 text-secondary"></i> info#example.com
</p>
<p>
<i class="fas fa-phone me-3 text-secondary"></i> + 01 234 567 88
</p>
<p>
<i class="fas fa-print me-3 text-secondary"></i> + 01 234 567 89
</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!-- Section: Links -->
<!-- Copyright -->
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.025)">
© 2021 Copyright:
<a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- Carousel wrapper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
Here is my screen shot

Answer 1

I was able to figure out what I was doing wrong
.bigcontainer {
display: flex;
flex-wrap: wrap;
width: 98vw;
align-items: center;
margin: 20px;
font-family: "sans";
margin-left: 150px;
}
.bigcontainer::after {
width: 98vw;
position: absolute;
z-index: -1;
right: 0;
}
.bigcontainer > div {
width: 50%;
height: 50%;
padding: 18px;
}
.box1 {
margin-bottom: 20px;
}
.box3 {
display: flex;
gap: 10px;
}
.box3 img {
width: 45%;
height: 30rem;
}
.box2 img {
width: 70%;
}
#media screen and (max-width: 908px) {
.bigcontainer > div {
width: 100%;
height: max-content;
flex: 0 0 100%;
}
.bigcontainer {
display: flex;
flex-wrap: wrap;
width: 98vw;
align-items: center;
margin: 20px;
font-family: "sans";
padding: 15;
margin-left: 0;
margin-top: 150px;
}
.text-container {
width: auto;
margin-bottom: auto;
}
.testing {
width: auto;
margin: auto;
}
.box2 {
order: 4;
}
.box2 img {
width: 100%;
height: 100%;
}
.box3 {
flex-wrap: wrap;
}
.box3 img {
width: 100%;
}
.box2 img {
width: 100%;
}
.bigcontainer::after {
display: none;
}
}
.box1 {
font-family: "sans";
line-height: 150%;
}
.box4 {
font-family: "sans";
line-height: 150%;
}
h3 {
font-size: 18px;
font-weight: bolder;
}
.box4 h3 {
padding-left: 15px;
}
.imge-4 {
width: 100px;
}
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0; /* remove the gap so it doesn't close */
}
.text-container {
width: 600px;
margin-bottom: 90px;
}
.testing {
width: 600px;
margin-left: 20px;
}
#media screen and (max-width: 568px) {
.bigcontainer > div {
width: 100%;
height: max-content;
flex: 0 0 100%;
}
.bigcontainer {
display: flex;
flex-wrap: wrap;
width: 98vw;
align-items: center;
margin: 20px;
font-family: "sans";
padding: 15;
margin-left: 0;
margin-top: 150px;
}
.testing {
width: auto;
margin: auto;
}
.text-container {
width: auto;
margin-bottom: auto;
}
.box2 {
order: 4;
}
.box2 img {
width: 100%;
height: 100%;
}
.box3 {
flex-wrap: wrap;
}
.box3 img {
width: 100%;
}
.box2 img {
width: 100%;
}
.bigcontainer::after {
display: none;
}
}