How to vertically center (50%) a row between 2 sections

Support
#1

Hi there,

How to vertically center 50% row between sections. Or a better option for the same effect.
Thank you for your support

#2

Hello @Iban,

Thanks for writing in!

To resolve your issue, please create a separate section and moved the row into this new column. You must determine the height of this row. And in your section settings, you can add a negative top margin which is half of the the total height of the row so that the section will be positioned 50% between the other sections.

Hope this make sense.

#4

Hi there, thank you but this is not working. I have followed your instructions I’m I doing something wrong or it is just not working?
Thank you

#5

Hello @Iban,

We’d love to create a test page for you. Would you mind providing us the url of your site with login credentials so we can log in and check your page as well?

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

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
​
Thank you.

#6

Thanks
Here it is

#7

Hello @Iban,

I went ahead and edited your page. Instead of adding a top margin to the section, I added a custom code in the row settings instead:

@media(min-width: 768px){
  .x-section $el.x-container {
    margin-top: -300px;
  }
}

The overlap will only happen in larger screens. In mobile screens, the section will display as normal. The gap element and the extra row for spacing will not display in smaller screens as well.

Please check the page now.

#8

Hi, thank you. Getting close. I need the circles to stay in the middle of both sections on any screen while showing the 4 circles in line.

#9

Hello @Iban,

To make sure that the circle will be at the center line between the sections, you will need to make sure that the height of the section will remain the same because has of the height is the top margin. At the moment, the height of the section is 529 pixels which is why the top margin is -264px. Because the circle is not located at the center, you will have to increase the top margin to at least 275px.

There is a problem with this setup. Please be aware that you cannot control the height of the section because as the browser width gets narrower, the height will become higher. What you have in mind may not possible with the current setup.

It may be possible by detecting the height of the section which will require custom development. Regretfully custom coding is beyond the scope of our support.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer.

Thank you for your understanding.

#10

Thank you RueNel

#11

You’re welcome, Iban.

#12

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