Vertical alignment issues

Support
#1

Hello,

Since 4 hours I am playing around with margins, paddings and extra CSS to get the following to work:

In Cornerstone now it looks as it should:

But when you open the website it looks like this:

Problem: Discrepancy between Cornerstone and output view.

I used the custom CSS “display:inline-block; float:none; vertical-align:middle;”, which is recommended in the following forum thread:

It would be nice if a supporter could login to my website to check what I am doing wrong.

Thanks for your help.

#2

Hello There,

Thanks for writing in! To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
Thank you.

#3

Okay. You can find my site and the login credentials in the secret note of this post.

#4

I know you have a lot to do because of the big update which brought quite a lot errors for many people, but I am waiting for 2 days now and this is definitely not the promised 24/7/365 support you are advertising!

I would like to continue working on my site so I would appreciate if you could fix or at least analyse the problem in the next hours. Thank you.

#5

Hello There,

We apologized for the very slow response time. We are swamped with huge number of tickets as of the moment, and this is why it would take us longer to respond. Anyway, I have inspected the page and even resolve the issue. I did the following:
1.) Remove all your custom inline css in each of the columns
2.) In the row settings, I enabled the “Marginless Column” option.
3.) In each of the columns, I added an inline css vertical-align: center;
4.) In the right column, I added some paddings so that there will be some gap between the image the the texts.

Please check the page now.

#6

That seems to kind of work for the desktop view, but if you want the text to be in line with the box limiting the content then the MOBILE version looks bad.
To fix this I would have to copy the whole section and make one without and one with padding and allocating one section to mobile and the other to desktop view.

Is there really no other way than this “workaround”. Why it is not possible to have “Marginless columns” enabled AND “vertical-align:center” at the same time?

#7

Here you can see the problem:

As you can see I would have to duplicate the section and make one for mobile and one for desktop.

I think the only REAL solution would be to be able to use vertical alignment AND Marginless columns AT the same time.

#8

Hi there,

How about using class-based CSS? It’s because adding styling directly has no distinction between device. And it’s always true for every CSS. If you wish to limit it for a specific device then you’ll have to use @media query. Example, add this to your global custom CSS

@media ( min-width: 980px ) {
.desktop_space_left {
    max-width: calc( 100% - 50px );
    float: right;
}
.desktop_space_right {
    max-width: calc( 100% - 50px );
    float: left;
}
}

Then simply inspect your text and go to Customize section and add desktop_space_left in its Class input field. And that’s it, the spacing will only apply to desktop and it will remain 100% width in mobile.

Thanks!

#9

Thanks for the answer. I think this will work for me.

However I would suggest to implement the “vertical alignment” feature of elements in the GUI of Cornerstone just as easy as you can achieve a horizontal alignment. It would be nice if you could take this suggestion into consideration.

1 Like
#10

Hi there,

You’re welcome and glad it’s working now.

Alignment is a bit tricky depending on how users structure their layout, but noted :slight_smile:

Thanks!

2 Likes