Flexbox- What am I doing Wrong?

Flexbox- What am I doing Wrong?
0.0 0

#1

I’m trying to use only Flexbox on my portfolio site. However, I’m new to it. (Previously, you guys were very nice to help me with Bootstrap.

In this project, I’m not sure why I can’t center my name in the middle of the black box and center the titles in the black box while having the lined up next to each other. I have the code that I think should work in here. Can someone please tell me what I am doing wrong? I learned basic flexbox with Flexbox Froggy.

Thanks.


#2

Not sure if this is closer to what you want, but you can try it. Test it out by shrinking the browser window width to see how it responds. I am no flexbox expert and I am sure there is another way to write the CSS with less code to do the same thing.

Also, I simplified your black/white containers by just creating a class named container which has a black background and then using nth-child(odd) pseudo-selector to make ever other container have a white background.

HTML

<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="/Users/marklips/Desktop/Allison Portfolio/Allison.css">
  <title>Allison Lips - Digital Marketing - Content Writing - Web Design</title>
</head>

<body>
  <div class="container">
    <div id="name"> Allison Lips </div>
    <div class="titles">
      <div> Content Writing </div>
      <div> Digital Marketing </div>
      <div> Web Design </div>
    </div>
  </div>
  <div class="container">
  </div>
  <div class="container">
  </div>
  <div class="container">
  </div>
</body>
  
</html>

CSS

.container {
  background-color: black;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container:nth-child(odd) {
  background-color: white;
}

#name {
  color: #EB127D;
  font-size: 500%;
  align-content: center;
  text-align: center; /* there is probably a more flexbox way to handle this */ 
}

.titles{
  width:100%; /* there is probably a more flexbox way to handle this */ 
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: white;
  text-align: center; /* there is probably a more flexbox way to handle this */ 
}

#3

Thanks. I did discover that some of the code you gave me doesn’t do anything. I’m going to try do do some research and find out why. It’s similar to the issue I was having. However, it did fix the placement of my name, so step one complete.

I really appreciate your help. You seem to help me on a lot of my projects.