Hello everyone! Beginner here looking for guidance on an issue I'm having with flexbox alignment

[Senuvox]

Howdy! As stated in the title, I’m quite new to coding and I’ve almost completed my first FCC project. But, I’ve ran into a snag regarding the alignment of a CSS flexbox I’m trying to setup with 3 titles and 3 containers of text. While I was able to get the first title and box into a proper position, the other two have proven rather difficult for me! I ended up tinkering with the positioning values which makes it look okay at 100% zoom but that’s not what I’d like and it’s certainly not a good habit to form!

Also please excuse any spaghetti code! (Or, feel free to provide extra tips! I’m eager to learn.)

The project’s Codepen can be found here: https://codepen.io/senuvox/pen/gOgrVbx

HTML Portion:

<!-- Flexbox -->
      
<div id="tribute-info" class="flex-container dosisfont">
  <div id=profilecombo>
    <h2 id=profiletitle> Profile </h2>
    <ul id=profilebox>
      <li> <strong> Date of Birth: </strong> 1980 </li>
      <li> <strong> Age: </strong> 31 </li>
      <li> <strong> Gender: </strong> Male </li>
      <li> <strong> Nationality: </strong> Japanese </li>
      <li> <strong> Hair Color: </strong> Black </li>
      <li> <strong> Eye Color: </strong> Black </li>
      <li> <strong> Build: </strong> Medium </li>
      <li> <strong> Occupation: </strong> Plant Appraiser/Horticulturalist </li>
      <li> <strong> Namesake: </strong> <a href="https://www.youtube.com/watch?v=DuFW9v8Wv5Y" target=_blank> When Mermaids Cry</a>, by Eagle-Eye Cherry </li>
      <li class=boxend> <strong> Stand Namesake: </strong> <a href="https://youtu.be/lHqZ87xld2Q" target=_blank> Doggystyle </a>, by Snoop Dogg (album)
  </div>
 
    <div id=summary-abilities> <h2> Summary </h2> 
      <div id=summarybox>
        <p> Lorem ipsum...</p>
      </div>
  </div>
    
    
    <div id=summary-abilities > <h2> Abilities </h2> </div>
     <div id=abilitiesbox class=fillertext>
        <p> Lorem ipsum...</p>
      </div>
  
</div>

CSS Portion:

  display: flex;
  justify-content: center;
  align-items: center;
 
}

#summary-abilities {
  display: flex;
  padding-right: 10em;
  
}

#abilitiestitle {
  display: flex;
 
}

#profilebox {
  position:relative;
  border: 0.7em double black;
  padding-top: 0.5em;
  padding-right: 0.5em;
  padding-left: 1.5em;
  padding-bottom: 0.5em;
  height: 12.5em;
  width: 21em;
 
}

#summarybox {
  position:absolute;
  border: 0.7em double black;
  padding-top: 0.5em;
  padding-right: 0.5em;
  padding-left: 1.5em;
  padding-bottom: 0.5em;
  height: 12.5em;
  width: 21em;

}

#abilitiesbox {
  display: flex;
  position:absolute;
  border: 0.7em double black;
  padding-top: 0.5em;
  padding-right: 0.5em;
  padding-left: 1.5em;
  padding-bottom: 0.5em;
  height: 12.5em;
  width: 21em;
 
}

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  justify-content: space-evenly;

}

[tlc35us]

Your HTML is invalid. Fix that first then see what is left to do. Use the Analyze HTML feature found by clicking the down arrow in the html window.

An HTML document contains first a head section then a body section which contains all the elements that appear on a page. These are mixed up. perhaps you meant <header>.

[leonfeng]

Howdy @Senuvox.

The two problematic divs have the same id of summary-abilities. An id should be unique. Try giving one div id="summary" and the other id="abilities".

Cheers~

[Senuvox]

Ah I see! Thank you for the advice!

[Senuvox]

Unfortunately, though I have made changes to correct sloppy coding I’ve dug an even deeper hole for myself that has broken even my profile box’s position.

[Sylvant]

hi @Senuvox , your image scales with screen, it looks alright on large screens, but the smaller the screen go, the image goes with it, to the point it becomes a stamp. I think you should play a bit with min and max sizes, or media queries so on larger screens it doesnt go too large and on smaller it doesnt srink, but just stay fit to the screen width.

About flexbox, while its very powerful tool, it also has its many backfire effects if not adjusted correctly and i had my fair share of frustration when something didnt work as i intended and most of the time its because not being fully aware of flexbox specifications. From the image i see, there seem to be some overwraping problem and i had similar issues. Make yourself familiar with the flexbox wrap effect.

A Complete Guide to Flexbox | CSS-Tricks

This is a great article on flexbox and whenever i have trouble adjusting something, first thin i turn to it

[Senuvox]

Thank you! I’m going to rewrite the entire flexbox and hopefully use this as a guide!