What custom CSS do I add to display 3 columns of animals in a grid using the Toolkit?

 
1
0
-1

I want to create this look. What do I need to add to my Toolkit?

    CommentAdd your comment...

    1 answer

    1.  
      1
      0
      -1

      Please note, this is for advanced users familiar with CSS.

      To create a similar look, it does help to first be sure all of your animal photos are cropped and sized to the same square dimension. Example: 500px x 500px.

      You can use the following options for your Toolkit. Be sure the Search Layout is set to Grid 2 and Pets per row is set to 3.

      Once you've saved your Toolkit, click on the Name of your Toolkit and click the button "Update Styles"

      Add the following CSS to your Custom Style Sheet

      .rgtkSearchPetPic {
width: 250px !important;
height: 250px !important;
}

.rgtkPetExtraMediaTable {
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
}

#rgtkSearchResultsRowHR_4_0 {
    border: none;
    padding: 6px 0;
}

td {
    border-top: none;
    padding: 6px 0;
}
#rgtkSearchPetInfoAnimalName.rgtkSearchPetInfoField {
font-weight: bold;
line-height: 17px;
}

#rgtkSearchPetInfoAnimalBreed.rgtkSearchPetInfoField {
line-height: 17px;
font-size: 14px;
color: #333;
}
        CommentAdd your comment...