Skip to content

Instantly share code, notes, and snippets.

@xnau
Last active Jun 27, 2018
Embed
What would you like to do?
CSS for setting up a grid layout using the Participants Database responsive list display
/*
Stylesheet for setting up a CSS grid layout for the
Participants Database responsive list display
*/
/* this is to hide unneeded elements */
.pdb-list-grid .pdb-field-title,
.pdb-list-grid h5 {
display: none;
}
/* sets up the grid container */
.pdb-list-grid .list-container {
display: grid;
/* sets up the columns: here we set up 3 equal columns */
grid-template-columns: 1fr 1fr 1fr;
/* this defines the amount of space between the elements */
grid-gap: 2.5em 5%;
}
/* this styles each record section */
.pdb-list-grid section {
/* don't need margins, the grid does this for us */
margin: 0;
}
/* make the data fields sit next to each other */
.pdb-list-grid .pdb-field {
float: left;
margin-right: 1ex;
}
/* this makes the 4th field start on a new line */
.pdb-list-grid .pdb-field:nth-child(4) {
clear: left;
}
/* this styles the photo field */
.pdb-list-grid .pdb-field:first-child {
margin: 0;
overflow: hidden;
}
/* sets the size of the image element */
.pdb-list-grid .pdbiex-image-field-wrap,
.pdb-list-grid .image-field-wrap img {
width: 100%;
height: auto;
}
@xnau

This comment has been minimized.

Copy link
Owner Author

@xnau xnau commented Jun 26, 2018

CSS sheet for the article "Using Grid Layouts with Participants Database"

This assumes a shortcode similar to this:

[pdb_list template=responsive fields="photo,first_name,last_name,city,state" class="pdb-list-grid"]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment