Vertically Align row in cornerstone

Support
#1

I am trying to find a way to vertically align a row in cornerstone. My page is set up as follows:

I have a section created. Inside that section there are 2 rows. Inside row #1 there is a single image, and inside row #2 there are 4 images.

I want row 2 to vertically align to the center of the section, and then have row #1 float above it.

Here is a screenshot of my page currently:

As you can see, both rows are aligned to the top of the page, and therefor they are leaving lots of open space below them.

Any ideas how to fix this?

#2

Hi There,

There is GAP element available. Add GAP element on top of your content. Feel free to adjust height accordingly. Since this GAP has fixed height, there is a visibility option. This way we can add multiple GAP, one is for desktop view with specific height, another for mobile with either lower/higher height. With this setup we can control the location per screen size.

Hope this helps.

#3

The gap element works, but I wasn’t wanting to use it since it does not automatically scale based on screen size.

Currently my screen auto scales based on the hight of the screen you are on, so sometimes that section is 500px tall, other times it may be 800px or 300px. Regardless of the size I want to center my content vertically in that section.

Is that possible?

#4

Hi there,

What you need for that is creating CSS and JS to implement a responsive offset based on screen size and scaled content. But, it’s not recommended to re-create what’s already been available. You should try using Revslider and use its full-screen feature and position your elements. It will respond to the proper offset based on device size.

Thanks!