---
title: Author Boxes and Custom CSS
description: "The [Author Boxes](https://publishpress.com/links/author-box) features in [PublishPress Authors](https://publishpress.com/links/authors) allows you to use custom CSS to make modifications to your [author boxes](https://publishpress.com/links/author-box). Here are a few real use case scenarios that might be useful for your needs. This can be done from…"
url: "https://publishpress.com/knowledge-base/author-boxes-and-custom-css/"
updated: "2026-10-14"
category: PublishPress Authors / Author Boxes
---

# Author Boxes and Custom CSS

The [Author Boxes](https://publishpress.com/links/author-box) features in [PublishPress Authors](https://publishpress.com/links/authors) allows you to use custom CSS to make modifications to your [author boxes](https://publishpress.com/links/author-box). Here are a few real use case scenarios that might be useful for your needs. This can be done from the "Custom CSS" tab inside each [Author Box](https://publishpress.com/links/author-box):

![Custom CSS box in PublishPress Authors](https://publishpress.com/wp-content/uploads/2024/06/custom-css-tab-1024x416.png)

---

## #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};
```

![PublishPress Author profile](https://publishpress.com/wp-content/uploads/2023/08/author-fields-stacked-no-hyperlink-1024x357.png)

---

## #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;
}
```

![PublishPress Author authors profiles](https://publishpress.com/wp-content/uploads/2023/08/image-stretched-1024x838.png)

---

## #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;
}
```

![PublishPress Author profile side-by-side](https://publishpress.com/wp-content/uploads/2023/08/author-boxed-2-columns-1024x203.png)