Full height grid

Support
#1

Hi,

I want to use the Domino grid in a full width section/row which will be at the top of my page, but I can’t figure out how to make it full height?

If I post this code in the grid:

$el {
height: 100vh;
}

  • it makes the section full height, but not the grid. If I post the code in the first cell it looks right, but on mobile etc. it will only be the first cell which is full height.

Can you help me out?

#2

Hello @Kobber,

Thanks for writing in!

Please keep in mind that the height of the section depends on the height of the grid which is also dependent on the height of the columns. If you want that all of the cells will be full height in smaller screens, then you may use this code in each of the cells.

@media(max-width: 767px){
  $el.x-cell {
    min-height: 100vh;
  }
}

We would love to know if this has worked for you. Thank you.

#3

Hi @runel,

My idea was that the Domino grid would be full height on both PC and mobile, but on mobile only cell 1 and cell 3 (see image). Cell 2 will be hidden during breakpoints.

What’s the best way to do that?

#4

Hello @Kobber,

In that case, for the PC or desktop screens, you will have to set the height of cell 1 to 100vh by default.

And then, for cell 3, you insert this code:

@media(max-width: 767px){
  $el.x-cell {
    min-height: 100vh;
  }
}

We would love to know if this has worked for you. Thank you.

#5

It doesn’t work. The image I’ve uploaded shows how I want the viewport to be - both on PC and mobile, and with the adjustments you posted, Cell 3 is not visible in the first viewport on mobile - it will fill the “second viewport” when scrolling down instead. I want Cell 1 and 3 to be visible in the first viewport on mobile…

I also tried to do the solution with the row element, but no luck there either.

#6

Hey @Kobber,

Cell 1 must be 100vh in height on desktop and 50vh on mobile. The code should look like the following. Adjust the media queries according to what you need.

@media (min-width: 980px) {
  $el.x-cell {
    height: 100vh;
  }
}
@media (max-width: 979px) {
  $el.x-cell {
    height: 50vh;
  }
}

Next, copy the 50vh media query to Cell 3. You can see in the video below how this works. Just slow the play speed down if it’s hard to follow along.

Hope that helps.

#7

Worked perfectly - thanks!

#8

You’re welcome, Kobber.

#9

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