lg-row height = viewport height

---

Hi,

I just start using LayGridder, which is great, and I wonder if it's possible to set up the row height to viewport height ?

I mean, I could overwrite the plugin CSSs with something like this :

.lg-row { height: 100vh !important; }

but it breaks the layout and then the content isn't centered vertically in the row.

I'd like all the rows to be set as 100vh height with the content centered vertically inside.

Thank you for your help.

Regards, Aurélien

Hey sorry for the late reply!

You can use this feature:
http://laygridder.com/documentation.html#use-browser-height-for-row-height

Thanks!

Hi, thank you for your answer.

I'm actually encountering a stronger issue with LayGridder... I'd like some of my pictures to fit the lg-100vh's height.
e.g.

Please can you help ?

Please can you help ?

Ok, I paid 90 EUR for a plugin that didn't get any support.
No email, no answer on this forum...

My problem is that if I set .lg-row to :
height : calc(100vh - 80px);
margin: 0 40px;

The pictures inside aren't resized to fit the height of their container.
And if I set .lg-row img to :
height: calc(100vh - 80px);

It breaks the proportion.

I just want to be able to set the height of my lg-rows and that the content height fits this value.

Please can you help me ?

Omg sorry for the late reply, we were on holidays and before I didn't look at the forum often enough

I sent u an email!

Hey!

With this CSS, an image will always fit into the browser window's height. Note that this won't work on any website, as this CSS works together with some other LayGridder CSS.

.lg-type-img.lg-col{
  max-height: 100%;
}
.lg-type-img.lg-col .lg-placeholder{
  position: static!important;
}
.lg-type-img.lg-col img{
  object-fit: contain;
}

This some optional CSS. When a row only contains only one image, this one image will always be centered and fit into the browser window's height:

.lg-one-col-row.lg-contains-img .lg-placeholder{
  position: static!important;
}
.lg-one-col-row.lg-contains-img .lg-col{
  position: static!important;
}
.lg-one-col-row.lg-contains-img img{
  object-fit: contain;
}

I added both of these CSS to your stylesheet. Find it at /* CSS by Armin Unruh */
Also I commented out some CSS that you won't need anymore above that in your stylesheet.

You will notice that while this works, your texts do not resize in the same manner as your images and the text will overlap images in some cases.

I see that you only have lots of text in your first row in the example page you sent me. To avoid having that text overlap the images below you could use this CSS:

.lg-grid .lg-row:first-child {
  max-height: calc(100vh - 180px);
  height: auto;
}

Note that your other CSS is

.lg-grid .lg-row {
  height: calc(100vh - 80px);
}

So when I set .lg-grid .lg-row:first-child to height:auto this will prevent the row getting smaller than it's row content.

Also you will notice the image sizes change, but the spaces between your images won't change relative to the image sizes. In example 2 below I mention how to do this theoretically. (Not rlly possible with laygridder).

I had to think about this problem more deeply and wrote down some of my thoughts here:

So the problem is the layouts that can be done with laygridder are entirely browser-width-based. Not browser-height-based.

What you are looking for is a layout that is width and height based at the same time.

The pictures doesn’t fit to the row’s height… They exceed the containers.
And if I overwrite the img’s height with CSS, it breaks the proportion of the picture.

Let's for a minute not think about laygridder, but let's think about how to approach this problem in general:

Simple example. You have an image with an aspect ratio of 4:3.
First image on the left, the browser is wide, image on the right, the browser is narrow.

In the first wide browser, the image has to be "height: 100%",
In the second narrow browser, the image has to be "width: 100%"

There are multiple ways to code this:
JavaScript and CSS:

1. You need to compare the aspect ratio of your browser window to the aspect ratio of the image. If windowAr > imageAr then give image height: 100%; and width: auto;
2. CSS only: Give image max-width: 100%; max-height: 100%; height: 100%; width: 100%; The downside here is the natural size of the image should be larger than your browser window if you want to always have the same space between image and browser edge.
3. CSS only: width: 100%; height: 100%; object-fit: contain;

Second example. You have two images next to each other.

Imagine around these two images is a container (red line). You need to compare the red container's aspect ratio to the browser-window's aspect ratio. Based on that you give the container either width:auto; height: 100%; or width: 100%; height: auto;.

Here is a somewhat similar example to the one before with 2 images that have different aspect ratios.

This is what it should work like if you were to do a layout that is both browser-width and browser-height based.

Lastly, I want to apologize for you having to wait so long for a response. I asked one of my colleagues to do support for laygridder, but he failed to do so. Now I will ask someone else to do the support.