DEV Community

Cover image for Flexbox with my fictional company home page
Heggy Castaneda
Heggy Castaneda

Posted on

Flexbox with my fictional company home page

#flexbox #css #html

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;
}
Enter fullscreen mode Exit fullscreen mode
  • Flexbox for my photos so it fits well in different device sizes 
.gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode 
.col {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
aj9775 profile image
aj9775 •

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.