Row question

Beta
#1

Pls. Look at video.

www.loom.com/share/b347ef7c734e45ac8661db8c5466c480

I know i’m stupid, but if by default row element have display: block; why there is “align horizontal” and “align vertical” settings? Is they works? I m alignin’ columns inside a row with

$el {
  display: flexbox !important;
  align-items: center;
  justify-content: center;
}
#2

Hey Philipp!

Thanks for sharing this. Watching this kind of stuff makes me excited about seeing how people will explore new layout possibilities now that flexbox is front and center.

I was double checking this and I’ve added a new row. Looks like it has display: flex by default. You shouldn’t need to add that custom CSS.

I’ve added this Element CSS on the Row:

$el {
  min-height: calc( 100vh - 90px );
}

Align Horizontal will only work if there is horizontal space available. You can add a max-width to the Columns to achieve this. Similarly, Align Vertical will work anytime the Columns are naturally shorter than the viewport. A small min-height should do it, or just a few elements present.

All that said, I might be missing something fundamental here because you’ve mentioned display:block; on the row. That shouldn’t be there. If you share a link to the site (secure note for privacy if needed) I can take a look.

PS: Total aside, but I thought you might appreciate this. From our chat about scroll reveal I gather you're interested in helpful little patterns It's a fun little technique that we've been using outside of X and Pro where IE11 compatibility isn't as relevant. I noticed you did this: 
min-height: calc( 100vh - 90px );

I’m assuming that 90px is your 45px + 45px combined section padding? Try using this on your row:

$el {
  min-height: calc( 100vh - var(--section-padding) );
}

And this either in the page CSS, or global site CSS:

body {
  --section-padding: 90px;
}

And if you ever change the padding on a section you can do this for the Section:

$el {
  --section-padding: 120px;
}

The the row inside that section will automatically adjust with the overridden value, while the rest use the global value It’s a neat little abstraction that helps you manage variables in CSS so you don’t have to hand code as many magic numbers.

Ok, rant over! Back to solving beta issues! :smile:

1 Like
#3

Sorry. My fault. There is new .x-row-inner which have display: flex instead of .x-row have display: block;

Now i m going to try your code :slight_smile: THANK YOU!

#4

Gotcha! Ok. Let me know if you need anything else here. :slight_smile: