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.