100% acts as VH

Hey all,

I’ve having a go at the 2021 portfolio course. Got stuck at the responsive part.

When setting an image to 100% height, its actually acting as 100VH

I’ve checked all other containers, sections and instances, and there is nothing I can see forcing the height to 100VH rather than %

Couldn’t find anything similar on the forum so posting here…

Appreciate any help in advance!


Here is my site Read-Only: https://preview.webflow.com/preview/portfolio2021-741130?utm_medium=preview_link&utm_source=designer&utm_content=portfolio2021-741130&preview=b3da5ba3efd9fad07c24fa6995f90ccc&mode=preview

There’s no reference for the percentage. If you want 100% height you need to set the container’s height. Use 100% width if you don’t want to do that. Your flexbox will constrain the width.

Thanks for the reply alenadena!

So according to the course if you set the width and height to 100% you should get a bit of a squeezed image…

But there is no way I can get that to happen. Even when setting the width and height, both to 100%.

Am I following any instructions wrongly? Sorry if I am, rather new to Webflow!

Check the difference here:

Huh, I’m actually not sure but if I open your site it looks fine to me

Right! must be a safari issue. Just tested it on chrome and looks like your screen shot.

Still not a true representation of what is being “taught”, if you look carefully it does not look like part of the vide, there is some glitch somewhere, in the matrix… And further, seems like a reasonably size bug on safari. Unless I’m the only one having issues with this.

Really appreciate you taking the time to answer! :+1:

Can you please explain what exactly you want to achieve that doesn’t work for you? Looks like everything behaves as it should.

It is mostly likely that I am misunderstanding something since, well, I am just learning webflow.

But for what I can see, things do not look like they should.

So I am looking at this:
https://preview.webflow.com/preview/portfolio2021-741130?utm_medium=preview_link&utm_source=designer&utm_content=portfolio2021-741130&preview=b3da5ba3efd9fad07c24fa6995f90ccc&mode=preview

And to me it does not looks like this:

Even though the setting are the same.

To clarify further. Based on my basic understanding of HTML, CSS and what I have been learning about webflow, things work like this:

The content inside a block or box or container is what determines its size, unless stated otherwise. For example if you have a header and 3 lines of paragraph text inside a container, the height of the container should be equivalent to the header and text (unless specifically determined), right?

Assuming that what I described above is “right”, the issue is the following:

When a 100% height for a fill image is stated it should respect the content. Or at least that is what I understand from this: https://youtu.be/wbcIj7jUz_s?t=328

When I define a 100% width and height for my fill image, it does not respect the content.
Same settings, produce different results. That is the issue.

So I am getting information from the course that does note reflect the practicalities of applying it.

Long story long, what I am trying to achieve is the same results as the steps on the course.

Is it not evident that they (my site, and the video) look and function differently?

Thanks again for the patience and the support on trying to understand me!

Ah, I see! Yes, you are probably correct and something is weird with the course video. I’ve never seen an image to take the height of a nearby content unless it is specifically told to have a certain height. 100% in this case is also 100% of the original image height.

And if you look at their clonable you will see that it behaves exactly like it does in your project. Which is expected, haha.

OK! cool! I thought I was going crazy there for a minute! :joy:

Thank you Alex!

Now, the thing is. I can’t complete the project in Safari. It just doesn’t work. Ok I can use chrome, but I can’t control the end user’s browser (hypothetically speaking).

Could it be I am the only person to use webflow on safari? :face_with_hand_over_mouth:

Set image height to auto for it to work in Safari.

1 Like

Which then will only work on mobile-landscape if a min-height is also set. Work-arounds tend to work. They should def. edit that video though…

thanks for the patience and help!