Flexbox position of h element within div

HTML-CSS
1

Hello community,

I am having difficulties figuring out how the following error can be solved:
The section has one div element and within that there are 4 div elements.
I used Flebox to place the 4 divs next to each other. In the 4 div elements there are h2 elements which would like to position at the bottom of the div elements as a title.

As you can see from the screen shot , the first two divs the h2 element is exactly where I want them to be, at the bottom, middle, However, for some reason , the last two are in a very different position, top left side of the div.
I am not sure if I described my problem with enough details, if you need more info just let me know.

image
image1711Ă—739 183 KB

I posted my code below here, the css is further down.

Thank you.

!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="styles.css" rel="stylesheet" /> 
     <link rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"/>
      <link  href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
      rel="stylesheet"/>
   </head>
   <header id="one">
  <nav id="navbar"> 
     <a href="#My_Projects">My Projects </a>
     <a href="#About_me">About me </a>
     <a href="#Contact">Contact </a>
     <a href="#navbar" class="menu-toggle">&#9776;</a>     
   </nav>
   <script>var menuToggle = document.querySelector('.menu-toggle');
    var navbar = document.querySelector('#navbar');
    
    menuToggle.addEventListener('click', function() {
      navbar.classList.toggle('responsive');
    });
  </script>
     </header>
   <body id="body">
       <section id="welcome-section"> 
       <h1> Devops Engineer</h1>
       <img class="dev-img " src="https://shalb.com/wp-content/uploads/2019/11/Devops1-1024x669.jpeg"/>        
          
      </section>
      <h3 id="My_Projects">My Projects</h3>
     <div class="two container "id="projects">
                  
      <div class="item item-1">
        <h2 class="project_title title_1 ">Picasso Pianting</h2>
      <a class="item-10" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-intermediate-css-by-building-a-picasso-painting/step-89"target="_blank" rel="noreferrer" > 
        <img class="item-10" src="https://iartprints.com/art-imgs/pablo_picasso/mediterranean_landscape-41085.jpg" alt="colourfull houses painted by Pablo Picasso.">
      </a> 
     </div>
    <div class="item item-2">
        <a class="item-11" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-69" target="_blank" rel="noreferrer"></a><h2 class="project_title">Cat Photo App</h2>
        <img  class="item-11"  src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
      
    </div>
    <div class="item item-3"> 
      <a class="item-12" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-forms-by-building-a-registration-form/step-63" target="_blank" rel="noreferrer"> 
        <img class="item-12" src="https://img.freepik.com/premium-vector/registration-form-template-with-flat-design_23-2147976843.jpg" alt="a registration formular for a profile"></a><h2 class="project_title">Registration Form</h2> </div>
    
        <div class="item item-4"><a class="item-13" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-typography-by-building-a-nutrition-label/step-67" target="_blank" rel="noreferrer">
       <img class="item-13"src="https://media-cldnry.s-nbcnews.com/image/upload/t_fit-760w,f_auto,q_auto:best/rockcms/2022-12/how-to-read-nutrition-label-inline-zz-221213-01-3212fe.jpg" alt="a nutritional label for food serving"></a> <h2 class="project_title ">Nutrition Label</h2> 
       </div>
  
</div>
         <section id="About_me">
           <h1>About me</h1> 
           <p>DevOps methodology is a collaborative approach to software development and deployment that aligns the development and operations teams to improve productivity, efficiency, and quality.
           Implementing DevOps in my previous company, we were able to streamline our software development process, reduce errors, and increase the speed of deployment.
           We utilized continuous integration and continuous deployment techniques and automated testing to make the process more efficient.
           The DevOps approach also ensured better coordination and communication between teams, enabling us to deliver products that aligned with customer needs and expectations.</p>
           </section>
<section id="Contact"><h1>Contact</h1>
   <p>If you could use my services, you can email me at<a href="mailto:qtbzet@gmail.com" target="_blank"> qtbzet@gmail.com.</a></p>
   <p> Or you can reach me at the following social media platforms:</p>   
   <div class="social-icons">
    <a id="profile-link"  href="https://www.linkedin.com/feed/?trk=onboarding-landing" target="_blank" rel="noreferrer">
    <i class="fab fa-linkedin-in icon1"></i></a>
       <a  href="https://instagram.com/freecodecamp">
            <i class="fab fa-instagram icon2"></i>
          </a>
           <a  href="https://www.youtube.com/freecodecamp">
            <i class="fab fa-youtube icon3"></i>
          </a>
                  
   </div>
</section>
   
   </div>
   </body>

  <footer>
    <p><a class="link"href="https://www.spiceworks.com/tech/devops/articles/what-is-devops/" target="_blank">DEVOPS</a> Engineering methodology  </p>
  </footer>
 </html>

Styles.sh begins:

*::before, ::after{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: 2px solid hotpink;
  
 }

body{
  background-color:gray;
  color: white;
}
 html{
  font-size: 70%;
 }
 
 #one{
   height: 7.5vh;
   width: 100%;
   background-color: #6B092F;
   border: 2px solid white; 
  
  }  
 #navbar { 
  background-color: #333;
   overflow: hidden;
   }

   #navbar > a{
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    font-size: 17px; 
     }  
   #navbar a:hover {
    background-color: #ddd;
    color: black;
  }
  
  #one script{  
    display: none;     
    border: 2px solid red;
    float: right;
    display: none;
    color: #f2f2f2;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    font-size: 17px;
  }
 .dev-img{
   width: 61vw;
   object-fit: cover;
   margin-left: 33rem;
   margin-top: 2.5rem ;
   margin-bottom: 1.5rem;    
 }
 #welcome-section::before{
  content: "🌟";
 }
 #welcome-section::after{
  content: " 🌟";
 }
 
 #welcome-section{
   width: 100vh;
   height: calc(100vh - 100px);
      
 }  

 /*.two > .title_1{
  display: flex;
  flex-direction: column;
  border:2px solid #f2f2f2;
  justify-content: center;
  align-items: flex-end;
  margin-top: 0vh;
 }*/
 
 .item {
   margin-left: 10em;
   margin-top: 3em;
 }
 
 .container{
  display: flex;
  flex-direction:  row-reverse;
  justify-content:flex-end;

 }
 .project_title{
  display:flex;
  flex-direction: column-reverse;
  justify-content;
  align-items:
  border: 2px solid blue;
 }
 .item-1,.item-2{
  display: flex;
  align-items:flex-start;
  border: 2px solid red;
}
.project_title{
  border:2px solid blue;
 display: flex;
 align-items: center;
 }
.title_1, .title_2{
  display:flex;
  flex-direction: ;
  align-self: end;
  align-itens: center;

}
 .item-1, .item-3, .item-4{
   border-left: 2px solid whitesmoke;
   border-right: 2px solid  whitesmoke ;
   border-bottom: 2px solid whitesmoke;
   padding-bottom: 2em;
   height: fit-content;
   width: 22.5rem;
   border-radius: 8px;
 }

 .item-2{
  border-left: 2px solid whitesmoke ;
  border-right: 2px solid  whitesmoke ;
  border-bottom: 2px solid whitesmoke;
  width: 18.5rem;
  height: fit-content;
  border-radius: 8px;
  padding-bottom: 2em;
 }
 
 
 img {
   max-width: 100%;
   max-height: 100%;
   border-radius: 8px;
   
 }
 
  .container:nth-child(even) {
   background-color:  ;
 }
 
 
 .one{
  display: grid;
  border: 2px solid blue;
  align-items: baseline;
  grid-area: ;
  
 }

 #About_me{
   border: 2px solid aqua;
   height:20vw;
 }
 #Contact{
   border: 2px solid purple;
   height: 10vw;
   
 }
 
 footer{
   border: 2px solid black;
   height: 5vw;
   width: 100%;
 }
 
 .social-icons{
   display: grid;
   font-size: 3rem;
   grid-template-columns: repeat(auto-fit, minmax(60px, 40px));
   align-content: ;
   padding-left: 20dvw;
  }
.icon3{  
  color: #FF0000;
  
}
.fa-instagram{
  background-color: #405DE6;
  background-image: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);

}
.fa-linkedin-in{
  background-image: linear-gradient(135deg, #0077B5, #0D66C2);
  color: #ffff;

}

.fab{
  border-radius: 5px;
}
#About_me > p{
  line-height:2lvh;
  font-size: medium;
}
footer{
  display:flex;
  align-items: center;
  justify-content: center;
  font-size: medium;
  background-color: #6B092F;
  color: #f2f2f2;
}
  a{
    color:white;
  }
2

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

.item-1 and .item-2 are flexbox containers .item-3 and .item-4 are not. If you want them to be flexbox containers they should have a column direction, or you can just remove the flexbox from them if you do not need it.

BTW, you should prefer ordering your HTML elements instead of using a reverse flex-direction. Order the items in the HTML as you want them when at all possible (it is here).

4

I appreciate your response., lasjorg

The only reason why I place the .item-1 and item-2 into flex container is because without the two items look like the following. I am having trouble understanding why Nutrition label and Registration form is nicely at the bottom, and the Cat Photo AP and the Painting’s title is at the top , I wold like all of them to be at the bottom.

image
image1796Ă—712 206 KB

Could you also explain your 2nd point little bit more, please, I am not fully understanding it.
“BTW, you should prefer ordering your HTML elements instead of using a reverse flex-direction. Order the items in the HTML as you want them when at all possible (it is here).”

Thank you

5

The h2 elements(Picasso Painting and Cat Photo app) in item-1 and item-2 containers are written before the img elements. Hence, the h2 elements are placed at the top before their image elements. Try to move your h2 elements of item-1 and item-2 containers to the bottom in the HTML file and you’ll get the desired result.

1 Like
6

There is no point in using a reverse flex-direction if you can just place the HTML element in the order you want them. The card container is using row-reverse so the last card comes first. If that is the order you want, just do it in the HTML.

If you set the cards to a flex direction of column you need to order the child elements correctly (image > text). You can again use column-reverse but as I just said there is absolutely no good reason to do so and having two of the cards using a text > image order and the other two using a image > text order is just confusing. Put the card child elements in the same order.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.