Author Boxes and Custom CSS

The Author Boxes features in PublishPress Authors allows you to use custom CSS to make modifications to your author boxes. Here are a few real use case scenarios that might be useful for your needs.


#1. Wider Space for Author Fields #

By default, Author fields will take up the space that is needed (inline). You could change it to occupy the entire space by changing the display to block. Here is the custom CSS to do that.

a.ppma-author-field-meta {display: block !important};

#2. Fix Stretched Author Avatars #

If you upload an image that is not proportional, it may appear stretched and distorted. To fix this, you can use custom CSS.:

.pp-author-boxes-avatar img {
    object-fit: contain;
}

#3. Author Boxes Side-by-Side/2 Columns #

Normally, our plugin displays author boxes in a vertical layout, one stacked on top of the other. However, if you prefer a 2 column layout, you can adjust the width to take up half of the space. To achieve this, you can use the following CSS code as an example::

.pp-multiple-authors-boxes-ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style-type: none;
padding: 0;
}

.pp-multiple-authors-boxes-li {
width: calc(50% - 10px);
margin-bottom: 20px;
}