CODEWITHSUNDEEP
htmlcssflexbox
lucasferreira96
lucasferreira96

Reputation: 39

html,css - Help adjusting a div and content-fit not working on ::after

I want the element .col-3 to get under the line I created in .container_ft::after I dont know how to put css in here. sorry.

*** (CSS) ***

   @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;900&family=Roboto:ital,wght@1,300&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #efefef;
  font-family: "Roboto", sans-serif;
}

.title__top {
  display: flex;
  font-size: 30px;
  width: 100vw;
  height: 10vh;
  justify-content: center;
  align-items: center;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 600px;
  background-color: black;
  padding-top: 50px;
}
footer .container {
  display: block;
  height: fit-content;
  width: 100%;
  padding: 20px 30px;
}
footer .container .container_ft {
  display: block;
  width: 100%;
  position: relative;
}
footer .container .container_ft::after {
  position: absolute;
  content: "";
  bottom: -60px;
  left: 0;
  right: 0;
  height: 0.5em;
  border-top: 1px solid #777;
  margin: 0 6%;
  width: 100%;
}
footer .container .footertop {
  display: flex;
}
footer .container .fbox {
  width: 25%;
  margin: 0 10px 0 40px;
}
footer .container .colorlib a:first-of-type {
  display: flex;
  justify-content: flex-start;
  font-size: 26px;
  text-decoration: none;
  font-weight: 600;
  color: #efefef;
  margin-bottom: 40px;
  line-height: 0;
}
footer .container .colorlib p:first-of-type {
  color: #747474;
  font-weight: 600;
  line-height: 22px;
  width: 210px;
}
footer .container .shop > a {
  display: flex;
  justify-content: flex-start;
  color: #747474;
  text-decoration: none;
  font-weight: 600;
  line-height: 35px;
}
footer .container .shop a:first-of-type {
  color: #efefef;
  margin-bottom: 30px;
  line-height: 0;
}
footer .container .press > a {
  display: flex;
  justify-content: flex-start;
  color: #747474;
  text-decoration: none;
  font-weight: 600;
  line-height: 35px;
}
footer .container .press a:first-of-type {
  color: #efefef;
  margin-bottom: 30px;
  line-height: 0;
}
footer .container .about > a {
  display: flex;
  justify-content: flex-start;
  color: #747474;
  text-decoration: none;
  font-weight: 600;
  line-height: 35px;
}
footer .container .about a:first-of-type {
  color: #efefef;
  margin-bottom: 30px;
  line-height: 0;
}
footer .container a {
  transition: 0.3s;
}
footer .container a:hover {
  color: #efefef;
}
footer .col-3 {
  display: flex;
  width: 100%;
}
footer .col-3 .c3 {
  width: 50%;
  height: 200px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Footer [1]</title>
</head>
<body>
    <section class="top"><p class="title__top">Footer [1]</p></section>
    <footer>
        <div class="container">
            <div class="container_ft">
                
                <section class="footertop">
                    <div class="fbox colorlib">
    
                        <a href="#">Colorlib</a>
                        <p class="textlib">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum, consectetur dolo.</p>
    
                    </div>
    
                    <div class="fbox shop">
                        <a href="#">Shop</a>
                        <a href="#">Sell Online</a>
                        <a href="#">Features</a>
                        <a href="#">Examples</a>
                        <a href="#">Website Editors</a>
                        <a href="#">Online Retail</a>
                    </div>
    
                    <div class="fbox press">
                        <a href="#">Press</a>
                        <a href="#">Events</a>
                        <a href="#">News</a>
                        <a href="#">Awards</a>
                        <a href="#">Testimonials</a>
                        <a href="#">Online Retail</a>
                    </div>
    
    
                    <div class="fbox about">
                        <a href="#">About</a>
                        <a href="#">Contact</a>
                        <a href="#">Services</a>
                        <a href="#">Team</a>
                        <a href="#">Career</a>
                        <a href="#">Contacts</a>
                    </div>
    
                </section>
            </div>
            </div>
            
         <div class="col-3">
            <div class="c3_block"></div>
            <div class="c3 col3-content c3-1"></div>
            <div class="c3 col3-content c3-2"></div>
        </div>
    </footer>
</body>
</html>


    
    
    
        
        
        
        
        Footer [1]
    
    
        Footer [1]

        
            
                
                    
                    
                        
        
                            Colorlib
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum, consectetur dolo.

        
                        
        
                        
                            Shop
                            Sell Online
                            Features
                            Examples
                            Website Editors
                            Online Retail
                        
        
                        
                            Press
                            Events
                            News
                            Awards
                            Testimonials
                            Online Retail
                        
        
        
                        
                            About
                            Contact
                            Services
                            Team
                            Career
                            Contacts

Upvotes: 0

Views: 34

Answers (1)

Geat
Geat

Reputation: 1209

Flex by default is always a single row. Whilst CSS Grids might be better for this layout, you can get started by adding flex-wrap: wrap; to footer.

Upvotes: 2

Related Questions