I am trying to make a responsive layout using flexbox. When it is wide, I want there to be two columns, one row. I want the content in the second column to be centered vertically, but not horizontally. When the window is narrow (like on a mobile device), I want column two to wrap underneath column one.
Here is my code.
#intro-grid {
display: flex;
width: 100%;
height: 100%;
max-width: 1000px;
margin: 0 auto;
margin-bottom: 6rem;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
.jesse-pic {
display: block;
max-width: 400px;
border-radius: 50%;
}
.intro-list {
display: flex;
color: var(--main-purple);
margin: auto;
padding: 5px 10px;
align-items: center;
justify-content: center;
flex-direction: column;
height: 50%;
}<div id="intro-grid">
<div class="row">
<div class="column">
<img class="jesse-pic" src="https://heathology.github.io/img/Jesse-Heath-July-2022.jpg" alt="Jesse Heath">
</div>
<div class="column">
<ul>
<li class="intro-list">I am a web developer</li>
<li class="intro-list"> I build websites using HTMTL, CSS, JavaScript, and WordPress.</li>
<li class="intro-list"> I am also a historical theologian.</li>
<li class="intro-list"> I love watching the following: absolutely anything in the MCU, Family Guy, MAS*H, NCIS, Bosch/Bosch:Legacy
</li>
</ul>
</div>
</div>
</div>I have tried adjusting the height in the .intro-list (which is the content in the second column I want to center), align-center, justify-center, etc. I know I am missing something, but I don't understand what I'm missing.
The content either aligns only at the top or is spaced out and centered horizontally (like you see in the image below). So, can someone advise me on how I can center the list vertically, but not horizontally?
You can see the full active site at http://heathology.github.io.