"Company Home Page with Flexbox" project

https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-making-a-website-responsive/modules/fecp-challenge-project-company-home-page/projects/company-page-with-flexbox

I’d like to move the left side of the MAIN content over to the right and bring the descriptions to the center beside the pics. i tried Align items but it didnt work.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Nunito', sans-serif;
}

h1, h2{
    font-family: 'Iceland', cursive;
}

header{
    height: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.icon{
    padding-top: 75px;
}

img{
    width: 15vh;
    height: 15vh;
    object-fit: contain;
}

ul{
    display: flex;
    list-style-type: none;

}

ul li a{
    padding: 0 20px;
    text-decoration: none;
    color: #3a3a3a;
    display: inline-block;
}

li a::after{
    content: "";
    display: block;
    height: 4px;
    width: 0;
    background: #c4c4f7;
    transition:all .5s;
}

li a:hover::after{
    width: 100%;
}

main{
    display: flex;
    border: 2px solid red;
    align-items: center;
    justify-content: center;
}

.content-right{
}
<!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="styles.css">
  <link rel="shortcut icon" href="Strike-icon.png" type="image/x-icon">
  <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Iceland&display=swap" rel="stylesheet">
  <title>Strike</title>
</head>
<body>
  <header>
    <div class="icon">
      <img src="/Flexbox project/Strike-icon.png" alt="Stike works developer and publishing logo">
    </div>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Team</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <div class="content-left">
      <h1>STRIKE</h1>
      <h2>APPLIED TECHNOLOGIES</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam velit mollitia assumenda esse ullam sit iusto eaque rem nisi nulla odit atque omnis vitae harum aspernatur, totam repellendus? Error, totam?</p>
    </div>
    <div class="content-right">
      <div>
        <img src="/Flexbox project/Game titles/BU5GD6WD618.jpg" alt="cover art for 'Apex'">
        <span>"Apex" Now all time best single player game.</span>
      </div>
      <div>
        <img src="/Flexbox project/Game titles/07 - g8vHp7L.jpg" alt=" cover art for 'Bean's World'">
        <span>"Beans World" Now One Of The Greatst Multiplayer Games Of All Time</span>
      </div>
      <div>
        <img src="/Flexbox project/Game titles/3eb5a9fec0c2ef0604ab9d98d9b14b9f.jpg" alt="cover art for'The Fruits of Eden'">
        <span>World Record Breaking MMORPG</span>
      </div>
    </div>
  </main>
  <div class="ledaership">
    <img src="/Flexbox project/Executives/39.jpg" alt="CEO/CREATOR: Gradey Robinson JR">
    <img src="/Flexbox project/Executives/123.jpg" alt="Tarik J Grant">
    <img src="/Flexbox project/Executives/454.jpg" alt="Marcus Meriser">
    <img src="/Flexbox project/Executives/633.jpg" alt="Lionel Blaise">
  </div>
</body>
</html>

Hi, so in order to use flexbox to center some elements on your webpage, this display flex should be declared on the parent container, then you can use align and justify the children of the flex container to center. So if you wanted to center your main element it should be wrapped in a div container with a display: flex;

1 Like

Thanks! i put Display flex on the main container itself but i need another div?

Yes for example:

<div class="parent">
   <div class="child">
   </div>
</div>

The CSS to center the child div:

.parent {
   display: flex;
align-items: center;
   justify-content: center;
}

1 Like

alright thanks again, ill play around with it and see if i get closer

1 Like

Alright, just let me know if you have any issues.
Happy coding !

1 Like

I will! Still havent solved it but i got some ideas so im gonna poke around a bit more when i get a chance before i circle back.

1 Like

Hey got another question. is the only way to center text nect to pic in .main to put spans in its own div?

    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Nunito', sans-serif;
}

h1, h2{
    font-family: 'Iceland', cursive;
}

header{
    height: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.icon{
    padding-top: 75px;
}

img{
    width: 15vh;
    height: 15vh;
    object-fit: contain;
}

ul{
    display: flex;
    list-style-type: none;

}

ul li a{
    padding: 0 20px;
    text-decoration: none;
    color: #3a3a3a;
    display: inline-block;
}

li a::after{
    content: "";
    display: block;
    height: 4px;
    width: 0;
    background: #c4c4f7;
    transition:all .5s;
}

li a:hover::after{
    width: 100%;
}

main{
    display: flex;
    justify-content: center;
}

.main{
    border: 2px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-left{
    border: 2px solid blue;
    max-width: 80vh;
    flex-shrink: 3;
}

.content-right{
    flex-shrink: 1;
    border: 2px solid violet;
}

no change to HTML

Hi @botosaui , can you share a screenshot so that I can see exactly which text you want to center next to which image, since I don’t have your actual content and just so that I can have a visual idea of the issue.

the right portion in the main section. bordered in violet

You could use a card like structure for this part.

So it would be written this way.

<div class="card">
  <img src="your-image" />
  <div class="card-info">
    <h2>header if any</h2>
    <p>Short description</p>
  </div>
</div>

And for your CSS it would be something like this:

.card {
  overflow: hidden;
  height: 120px;
  background: white;
  display: flex;
  align-items: center;
}

.card img {
  height: 100%;
  width: 120px;
  object-fit: cover;
}

card h2 {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.card p {
  font-size: 12px;
  line-height: 1.4; 
  margin-bottom: 0;
  margin-top: 8px;
}

.card .card-info {
  padding: 16px;
}

You can adjust the element to your liking, but this should do the job. Just be careful when using units like VH, VH is for the height of an element and VW is for the width.

1 Like

would “P” tag work better instead of span?
I also still haven’t positioned the them next too the image. i got them vertical again with Flex direction when i tried align items it only moves img

A simple p tag will do the job, there is no need to use a span unless you want to apply a specific style or animation to a word or part of a sentence. Try to use the model that I gave you as a starting point then do some adjustments according to your needs, try doing so in a different document until you get it right then you can use the code in your company website.

alright thanks, ill head to code pen