add spacing and responsive directory grid styles

This commit is contained in:
Evan Mullins 2019-03-16 18:52:52 -06:00
parent 8a8979ffa5
commit 1df00a0997
2 changed files with 18 additions and 7 deletions

View file

@ -128,15 +128,25 @@ body.logged-in .menu-item.logged-in {
.the-directory {
margin: 0 0 8rem;
}
.directory {
.the-directory .directory {
width: 100%;
display: flex;
flex-wrap: wrap;
flex-flow: row wrap;
justify-content: space-around;
}
.directory .person {
.the-directory .directory .person {
position: relative;
width: 20%;
padding-top: 20%;
width: 30%;
padding-top: 30%;
margin: 0 0 1rem;
text-decoration: none;
}
@media only screen and (min-width: 768px) { /* desktop */
.the-directory .directory .person {
width: 18%;
padding-top: 18%;
}
}
.directory .person:hover .directory-name {
opacity: 1;

View file

@ -38,7 +38,8 @@ get_header();
?>
<article class="entry the-directory">
<div class="entry-content directory">
<div class="entry-content">
<div class="directory">
<?php
// Array of WP_User objects.
@ -67,7 +68,7 @@ get_header();
}
}
?>
</div>
</div></div>
</article>
</main><!-- #main -->
</section><!-- #primary -->