Text alignment

I have a page that has a section at the top with a fullscreen image in the background. http://www.scottvarga.com/haptx/

I have two rows one with a headline and one with copy over the top of this image. Currently they are at the top of the page. I want to put these at the bottom of the image.

I have tried to use the "Text Content Flex Layout settings of the ROW to Horizontal Start and Vertical End but this does nothing.

How do I get these text boxes to show up at the bottom not the top?

Thanks
-scott

Hi There,

Thanks for writing in!

It should work the way you tried to put the text in bottom. Now sure why this is not happened to you.
Can you please send us your login details in a secure note so that we can have a look.

Thanks

Hello There,

Thanks for providing the credentials. Regretfully we cannot do much because it has a very limited privilege. It does not allow us to edit the page.

Well anyway, please have the page edited back in Cornerstone and do the following:
1.) Click the row and in the row settings, enable the “marginless columns” options.
2.) In the column settings, find the “Customize” tab
3.) Insert na inline css vertical-align: middle;

Hope this helps.

I just updated the user to full admin.

That said, I put that code in and it didn’t work?

Hey There,

The code did not work because you added it in the row settings. You are supposed to add it in the column settings. Anyways, I have fixed your issue by only having one row, I added the minimum height in the row settings and align it in the column settings.

Please check the page now.

It is not working for me when I view the page?

Attached is what I see

Hey There,

You must be editing the page while I am on it. I made the changes again.

Please check the page now.

Now it is working!

Thanks!

If I wanted it at the bottom I assume I would just change it to bottom instead of middle correct?

Thanks again!

Hey There,

Good to know that it is already working.
Yes you are right. Simply change the middle to bottom. For more information about vertical alignment, please check this out:

Best Regards.

Now every banner i put on the page does that and I only one the top banner to do that.

Is there some CSS I can apply to just the top banner?

Thanks

Hey There,

I am confused. Could you please give further clarifications?

So down the page if I add another container with a background image it acts the same way and I just want a standard banner scrolling up with the page that doesn’t get covered up by the items below it.

Hello There,

If you want a standard banner, please do not use the image as background image of your section. Use the image element instead. If you would want another section with a background image that will not have a parallax effect, you must update the code given to your in another thread and use this:

[class^="x-bg"][data-x-params*="parallax"] {
    background-attachment: fixed;
    transform: none !important;
 }

Please let us know how it goes.

Thanks! That seems to work.

But what if I want the top banner to have a fixed background with this code and then I want a banner below to have parallax but not be fixed?

Is there a way to assign a class to the top banner and then have your code called through that similar to this code:

.topbanner [class^=“x-bg”][data-x-params*=“parallax”] {
background-attachment: fixed;
transform: none !important;
}

Hello There,

yes you can. Simply edit the page back in Cornerstone and in the section settings find the “Customize” tab and insert the topbanner class so that your custom css will work.

Please let us know how it goes.

That didn’t seem to work?

Hey There,

It did not work because you added it in the wrong field.
Insert it in the Class field.

duh!

Thanks so much for all your help! And fast response time!

You’re welcome!
We’re glad we were able to help you out.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.