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; } 
Top comments (1)
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.