loading...
Cover image for Flexbox with my fictional company home page

Flexbox with my fictional company home page

heggy231 profile image Heggy Castaneda ・1 min read

Demo
Alt Text

For responsive mobile first design:

  • use the media query for mobile portrait

@media only screen and (max-width: 480px) and (min-width: 320px), (orientation: portrait)
.page-description, .staff-intro {
    font-size: 1.8rem;
    line-height: 2rem;
}

  • Flexbox for my photos so it fits well in different device sizes
.gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
  • Use of flexbox flex-direction: column, so that name, photo, intro are lined up vertically.
  <div class="col">
    <h2 class="team-name">Ashley Sullivan</h2>
    <img src="./img/pro-asian-woman.jpg" alt="smile asian lady look up">
    <p class="staff-intro">Ashley has a MD/PhD and is creative director for anything user related.</p>
  </div>
.col {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
}

Posted on by:

heggy231 profile

Heggy Castaneda

@heggy231

I'm here b/c one of you helped me answer my coding question and now it's my turn. "Openly sharing our work invites people to collaborate, tinker, learn from each other, and grow together." -Stanley

Discussion

markdown guide
 

Hi, can you please say how to publish my demo website using GitHub? I have already created a repository in GitHub and added all my codes on it.