I want to center my output from a relationship view.

This thread is resolved. Here is a description of the problem and solution.

Problem:

Center the items of a bootstrap view.

Solution:

This is a custom CSS codes problem, see the example here:

https://toolset.com/forums/topic/i-want-to-center-my-output-from-a-relationship-view/#post-1632991

Relevant Documentation:

https://tympanus.net/codrops/css_reference/empty/

This support ticket is created 4 years, 8 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

Tagged: Views, Views plugin

This topic contains 7 replies, has 2 voices.

Last updated by SteBlood 4 years, 8 months ago.

Assisted by: Luo Yang.

Author

Posts

May 20, 2020 at 7:43 am #1631517

SteBlood

I want to centre my view to the page.

Somehow I've managed to do it before.
I am using the elementor editor to create my templates.

Take a look at the screenshots.

May 20, 2020 at 9:03 am #1631683

Luo Yang

Hello,

Since you are using Elementor editor, I suggest you try to follow their document to center the elements:
hidden link

May 20, 2020 at 11:21 am #1631835

SteBlood

Hi Luo,

I think you've missed the point here.

If you take a look at screenshot 2, the view IS infact centre.
However, the information within the view is not.

May 21, 2020 at 7:02 am #1632801

Luo Yang

How do you setup "the information within the view" as center?
You can setup custom CSS codes to center HTML elements, for example:
hidden link

If you need assistance to setup CSS codes, please provide the live problem page URL, I need to test it in my Chrome browser.

May 21, 2020 at 8:34 am #1632891

SteBlood

Could you mark the next reply as private please?

May 21, 2020 at 8:38 am #1632899

Luo Yang

Private message box enabled.

May 21, 2020 at 9:18 am #1632991

Luo Yang

Thanks for the details, please check post view "Challenger Season 5":
hidden link

since you are using Bootstrap grid to display view's loop, when there is only one item in view's result, there will be three empty columns in view's result, and conducts the problem you mentioned above.

I have done below modifications in your website:
1) in section "Loop Editor", replace all:

<div class="col-md-3">

With:

<div class="col-md-3 aligncenter">

Add a CSS class name in each column "col-md-3"

2) Click "CSS Editor", add below CSS codes:

div.col-md-3:empty {
    display:none;
}

Hide all empty columns.

Please test again, check if it is what you want

More help:
hidden link

May 21, 2020 at 9:24 am #1632995

SteBlood

You absolute GOD!

My issue is resolved now. Thank you!