add spacing and responsive directory grid styles
This commit is contained in:
parent
8a8979ffa5
commit
1df00a0997
2 changed files with 18 additions and 7 deletions
20
style.css
20
style.css
|
@ -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;
|
||||
|
|
|
@ -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 -->
|
||||
|
|
Loading…
Add table
Reference in a new issue