Centering Row and removing ID in url

Support
#1

Hello.

I got 2 issues.

First off:
I was wondering how do i center a row/column both veritcally and horizontally in a section i have used " height:100vh; " in.
In all the other sections every row or column automatically centers itself horizontally and vertically.

If its not possible, Whats the best way to make a fullpage image With a logo in center that scales well on both computer and mobile.
I think With all the coding behind this well made theme there should be a way without adding a lot of css for such a simple task? Im just not seeing it i guess

Second off:
I want to remove the url of the ID’s.
When i press menus the www.luftspeil.no goes to .no/#omoss or whatever ID i use.
Am i using it wrong?

The site im using is:
www.luftspeil.no
Wordpress 5.3
Latest Version of X-Theme

#2

Hi Jim,

Thank you for writing in and hope you’re having a nice day, with the latest version now the Columns has the Flexbox Layout option.


Please enable the Flexbox Layout first and this will show you the Flexbox configuration which can enable you to horizontally and vertically center the column’s content without custom CSS.

Regretfully, that would require a custom code that we won’t able to provide. That actually has been introduced due to customer requests and our goal will be to keep the scrolling feature close to what browser’s do natively.

What you can do now is to apply that menu as the One Page Navigation so the page will smooth scroll to sections and not jump drastically.

Features - How To Setup One Page Navigation

Hope it helps,
Cheers!

#4

Hi.

Thanks for the feedback.
That didnt quite do it.

The Row/Column remains the same size and wont move itself vertically.
It alligns as it should horizontally.

But the image filling the page, has a section. Why isnt the row or the column finding the center of that in x / y?
Is it because of the height:100vh; ?

Is there a better way to make a Picture fullscreen than doing that command? And making a logo center easier.

#5

Hi Jim,

Currently, your ROW has no height to vertically center its column to, please apply the min-height on the ROW instead, you can add $el {min-height: 100vh;} on the ROW’s element CSS area.

And I don’t see the Flexbox Layout enable on your Column, did you follow my instruction above?

Cheers!

#6

It is now fixed.
I understand how it works now.
Thanks!

#7

You’re welcome, Jim. Glad we’re able to help.

#8

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