Docs

[joshnwarren]

I’m using this code to expand each section of my site to fit the screen and center the contents vertically, but when I add the code to center it vertically it rearranges everything, causing the rows to become side by side. Is there a way to fix this?

  .x-section { 
  height: 100vh;
  min-height: 800px;
  display: flex;
  align-items: center;
  padding: 0 !important;
  justify-content: center;
}

this is the page im testing it on: http://www.northstateoutdoors.com/test-page/

[Paul R]

Hi,

Upon checking, I can see your content are already centered vertically.

If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[joshnwarren]

I know that the content is aligned vertically but the 3×3 rows all line up next to each other when they should be in a grid layout. So I’m wondering how i can align content vertically without messing up the row alignment.

[Paul R]

Hi,

Kindly remove your css code.

To center your content vertically, you can add the code below in your columns style field.

float:none;display:inline-block;vertical-align:middle;

Hope that helps.

[joshnwarren]

Unfortunately, I still couldn’t get it to work. When I add your code but remove mine the sections no longer fill the screen and when I add your code but leave

 .x-section { 
  height: 100vh;
}

it just doesn’t center anything at all. I left it like that for now so you can look at it.

This is basically what I’m trying to do if you’re confused: http://codepen.io/ckor/pen/lBnxh/

[Paul R]

Hi,

Can you provide us your wordpress admin login in private reply.

I can set-up an sample page for you.

Thanks

[joshnwarren]

This reply has been marked as private.

[Paul R]

Hi,

Here is a sampla page – http://www.northstateoutdoors.com/xsupport-test/

Hope that helps.

[joshnwarren]

seems to work pretty well, is there a way to not have it on mobile though? or actually to make it so the height extends once the width is too narrow. If i’m on mobile and there’s a paragraph of text it will just extend past the section because there isnt enough space., so im trying to fix that now.

[Jade]

Hi there,

Instead of adding inline CSS styles, you can set those style through CSS class. Kindly add a CSS class name to the section and the row and add these code (assuming the CSS classes you add are vertical-section and vertical-row):

@media (min-width: 768px) {
    .vertical-section {
      height:100vh;
      text-align:center;
      position:relative
    }

    .vertical-row {
      position: absolute !important;
      top: 50%;
      width: 100% !important;
      border: 1px solid red !important;
      transform: translate(0%, -50%);
      -webkit-transform: translate(0%, -50%);
    }
}

I have update the sample page created by Paul and you could see the CSS code when you click the gear icon and then Custom CSS option in Cornerstone.

Hope this helps.

[joshnwarren]

it worked thanks for the help.

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts