100vh too big for screen

Design help General
1

Hi, If you look at the La Chiva Page on this website, you can see the 'Product Section is set tp 100vh; however, the image is too big for the screen. I am assuming this is because of the Nav Bar. Does anuone know how to get around this? My client wants the image to be seen in full, both width & height, is there an optimal size I should ask them to provide images?

Here is my public share link Webflow - Starke Creative
(how to access public share link)

2

Your navbar need to be position absolute and just apply 100vh to your slider only, to prevent image stretching set your image as background-image.

1 Like
3

Thank you @AntonioBalderas When I set the Nav to absolute the image moves up behind it, take a look at this page to see what I mean http://starke-creative.webflow.io/la-chiva

4

That’s normal but another alternative could be with custom code

.sliderclass {
height: calc(100vh - 80px(your navbar height);
}

and change your navbar position to auto.

1 Like
5

Thank you @AntonioBalderas - where does this code need to go?

6

and i’m guessing I don’t include the (your navbar height) ?

7 
<style>
.sliderclass {
height: calc(100vh - 80px);
}
</style>
8

Thanks @antonioBalderas, I really appreciate your help on this - I have added code before (not that I’m a coder at all, as you can tell!) does it go on the Head, Before Body or Body?

9

It goes in to the header but you only see the changes only when you publish your site and if you want to see the changes drop the custom code widget in the designer and paste the code there.

10

Hi @AntonioBalderas I have tried this on one page, On the settings section of the age I copied the code into the head box, it has made no difference either with or without setting the page height to 100vh?

11

Starke Creative - Branding & Packaging for Chewy Moon this is the page to which I applied to code.

12

Hi @Roxzfr, I have an idea for you to try:

Remember to remove the custom code that you added and republish the site.

Does this help?

13

Thanks @cyberdave, your logic makes sense. On my screen I still lose the writing at the bottom of the screen and the top left green image is slightly chopped.

1440×892 508 KB

14

Hi, @Roxzfr, the issue is that you are using this image as a background image, with position set to cover.

When the background is set to cover, the image will zoom in and crop the image, when the viewport is smaller than the image dimension. When the viewport is smaller than the image, the image is stretched to cover the element.

The solution is probably use the Contain background styling, and set the image width to 100% width and height, with Tile set to off:

This will distort the image somewhat, because the aspect ration of the image, does not fit the aspect ration of the element having the background image.

You might have to play around with the initial image dimensions to get the best aspect ratio fit and style your sections to fit those aspect ratios, here is some helpful reading: Importance of image size and aspect ratio in website design

I hope this helps!

15

Thank you @cyberdave :slight_smile:

16

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