Centering Authors List Using WPBakery Page Builder

Resolved ottfried
(@ottfried)

4 years, 9 months ago
Hi @wpkube,

I’m using WPBakery Page Builder to design a page where all authors are displayed.
I load and display only one author at a time with Authors List multiple times so that I can assign individual descriptions with after_title=””.
I have used WPBakery Page Builder to divide the page into 4 columns. Each column contains a text block, which in turn contains the shortcode for Authors List (that is assigned to one specific author).
Within the columns, I can centre “normal” text in the text block but this does not affect the Authors List shortcode, which remains left-aligned.

I have already added the following CSS code to my page:
```
.authors-list-item-thumbnail img {
	border-radius: 50%;
  display: block;
	margin: 0 auto;
}

.authors-list-item-main {
	text-align: center;
	align-items: center;
	justify-content: center;
}

.authors-list-item-title {
	text-align: center;
}

.authors-list-item-excerpt {
	text-align: center;
}
```
How can I centre the Authors List shortcode output within a WPBakery Page Builder column?

Best regards

Viewing 8 replies - 1 through 8 (of 8 total)

Thread Starter ottfried
(@ottfried)

4 years, 9 months ago

Sorry, I forgot to add the shortcode I’m using:

[authors_list style="1" columns="" avatar_size="170" show_title="yes" after_title="Custom Text" show_count="no" show_bio="no" show_link="no" skip_empty="no" exclude="" include="12"]

Plugin Author WPKube
(@wpkube)

4 years, 9 months ago

Hi @ottfried

This should work:

.authors-list-item { text-align: center; }

If it does not work out, can you please send over the URL to the page, I can use the dev tools to figure out what’s going on and how to resolve it.
Thread Starter ottfried
(@ottfried)

4 years, 9 months ago
Hi @wpkube

I’ve added your snippet to the custom CSS of my page but nothing changed.

Here’s the URL of the page I need help with: Link

I’ve tried to “centre” the individual text blocks using individual margins, but of course this does not look the same in every resolution.
I have inserted another row below the text blocks I manipulated (marked with “This row is for testing purposes”), in which there is a text block with an Authors List shortcode and unchanged margin.
- This reply was modified 4 years, 9 months ago by ottfried.
Plugin Author WPKube
(@wpkube)

4 years, 9 months ago

Hi @ottfried

The output is centered at the moment. Here’s a screenshot https://i.imgur.com/sxi1reL.png

But maybe I misunderstood what’s needed.
Thread Starter ottfried
(@ottfried)

4 years, 9 months ago
Hi @wpkube

Yes, within the Authors List block I was able to center all content using CSS.

I am referring to the alignment of the shortcode element itself on the whole page, see here:

View post on imgur.com

The text and the Authors-List shortcode are in the same text block and are both centered using the following code:
```
<p style="text-align: center;">This row is for testing purposes.</p>
<p style="text-align: center;">[authors_list style="1" columns="" avatar_size="170" show_title="yes" after_title="Custom Text" show_count="no" show_bio="no" show_link="no" skip_empty="no" exclude="" include="9"]</p>
```
Yet only the text is displayed centered, the Authors-List block is left-aligned.
Plugin Author WPKube
(@wpkube)

4 years, 9 months ago
Hi @ottfried

The top level element of the plugin output is a div which is a block element and does not get affected by text-align rules of it’s parent. Block elements take up 100% of the width.

You’ll need to switch it to a inline-block:
```
.authors-list-items {
    display: inline-block;
}
```
Thread Starter ottfried
(@ottfried)

4 years, 9 months ago
Hi @wpkube

Your suggestion to switch to an inline block didn’t change anything, unfortunately.
However, I was able to solve the problem as follows:

Step 1: I created a class authorcentered with the following content:
```
.authorcentered {
	display: flex;
	justify-content: center;
	white-space: nowrap;
}
```
Step 2: I used the authors-list-shortcode inside the class like this:
<div class="authorcentered">[authors_list style="1" columns="" avatar_size="150" show_title="yes" after_title="Marketing" show_count="no" show_bio="no" show_link="no" orderby="include" order="ASC" skip_empty="no" bio_word_trim="10" exclude="" include="15"]</div>

Applying display: flex; justify-content: center; white-space: nowrap to .authors-list-items messed up all the other Authors Lists, but with the individual class I was able to solve the problem.

Thank you very much for taking the time to support me!
Plugin Author WPKube
(@wpkube)

4 years, 9 months ago

Hi @ottfried

You’re welcome.

Happy to hear you found a solution. Sorry my suggestion didn’t work out.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Centering Authors List Using WPBakery Page Builder’ is closed to new replies.