How do I make our grid layout Toolkit one column on mobile devices?

 
1
0
-1

We are using a Grid layout for our Toolkit, which displays multiple animals per row. We would like this Toolkit to only show one animal per row on small screens. How do we do this?

    CommentAdd your comment...

    2 answers

    1.  
      1
      0
      -1

      You can add the following to the CSS field in your Toolkit:

      @media only screen and (max-width: 768px) {
.rgtkSearchResultsTable td {
display:block;
width:100%;
}
}
      1. Paula Jackson

        Where is the "CSS" field in the tool kit please.

      2. Michelle [RG]

        Paula,

        • Click on the Name of your Toolkit.
        • Click on the Update Styles button.

        Thanks,

        Michelle

      CommentAdd your comment...
    2.  
      1
      0
      -1

      Here are some additional styles you may want to use:

      /* Mobile device layout */
@media only screen and (max-width: 768px) {

.rgtkSearchResultsTable td {
display:block;
width:100%;
}

.rgtkPetContainer {
width: 100% !important;
left: 0 !important;
}

.rgtkPetInfoBox {
float:none;
}

.rgtkPetPicturePrimary {
width:85% !important;
margin-left:0;
}

.rgtkPetPicturePrimaryImg {
max-width:95% !important;
}

.rgtkPetFieldDescription {width:90%;}
}
        CommentAdd your comment...