Positioning in Pro

[dlukefinch]

Hi, it’s late so I have recorded a video for you. Hopefully you can decipher what I’m on about and wanting to achieve.

Sorry in advance… here it is: https://cl.ly/pUQb

[nico]

Hi @dfinch,

Thanks for writing in.

I could see in your video that you are having a problem with the preview panel of your setup.

Yes preview panel will not show you the exact form of your setup however you can utilize the button that I will show you below:

This button will show the full view of your preview panel.

Hope it helps.

Let us know how it goes.

Thanks.

[dlukefinch]

Ok, thank you for the clarification and sorry for not explaining as well as I could have done.

[Joao]

You are welcome!

[dlukefinch]

I want to have the “status” title and time and date centred regardless of how long the text is, currently if I type too much text then everything moves about.

Watch this video: https://cl.ly/pVyu for more info.

[paul.r]

Hi,

To achieve that, you can add the code below in your columns Inline CSS

float:none;display:inline-block;vertical-align:middle;

You need to add it to both adjacent columns.

Hope that helps.

[dlukefinch]

Thanks for that! But it doesn’t seem to have the desired effect…

[nabeel]

Hi again,

I checked the above CSS provided by Paul in my local installation and it works just fine, you need to add the inline CSS to both of your Columns otherwise it won’t work.

As an alternative solution you can activate the margin-less columns and add the following code in column’s inline CSS field but make sure to add the inline CSS to both of your columns.

vertical-align: middle !important;

You’ve two options now, I checked and both work.

Cheers!

[dlukefinch]

You seem to be adamant that I have done it wrong but @paul.r code did not work despite adding it to both columns. I have tried yours and it seems to have worked but I still have issues.

1. Position of the title isn’t quite right; screenshot: https://cl.ly/pYIq – All of the cantering options are not working in the backend. I have added padding to the left and right but can remove if required

2. The code you provide needs to work on mobile too. This is how it looks currently: https://cl.ly/pYTC Thoughts?

[ruenel]

Hello There,

I am another staff checking in.

1.) The position is correct. It is already positioned vertically. What you need is to position it to the center horizontally. To do that, please check the column and set the alignment to the center.

2.) The code will work in the desktop only. Because you have enabled the marginless column, you will have to add a column padding so that the text inside will have some padding around it.

I would recommend that you set up a staging site where we can check your work to better assist you in anyway. Perhaps, you can signup with pantheon.io and use this where you set up your staging area.

Hope this helps.

[dlukefinch]

Managed to sort it I think with your help. It’s late here so I’ll double check in the morning and report back. I’ve made the changes on another site too. You can check if I’ve done it right here: metcast.net

[ruenel]

No problem.
Please let us know how it goes.