Can someone help me set my hero element to 100% height using custom code?
You can do this without code in Wix Studio. If you select the ââŚâ next to the âSizeâ section of the Inspector you can turn on advanced sizing:
Then you can select a variety of different units for height including %.
1 Like
Are you part of Wix team? Can you ask your developers to implement this? If you want Wix Studio to be a serious tool for professionals it needs to have features like this.
I see. In this case % height is not shown as the section can be thought of as a div/uppermost container. It doesnât have anything to be a % of. It needs to be a height either relative to something (like viewport height, which is a % of the total height of the viewport) or an absolute height (like pixels).
However elements within the section can have their height set as a % of the section that theyâre in.
For example here I have a div with another div nested inside of it.
If I set the outside div #mySection to height: 50% it disappears as it doesnât have anything to be relative to. However if I set it to height: 50vh it shows up.
Then for my #myNestedElement I can set it as height: 50% because it has something to set its height relative to (ie. #mySection).
Can you share a bit more about what youâre trying to achieve here? Thereâs likely some way to do it.
1 Like
Here is a design I am working on. Note the bar at the bottom of the design. This whole header section ideally needs to fit perfectly on the screen. However, on IOS, this is not possible without using %. If you use VH, the address bar on IOS overlays the header section so it doesnât fit perfectly in the browser viewport and it obscures the bar at the bottom of my design. As a result it diminishes the design. Do you see what I mean? I am a perfectionist so I find it frustrating. I know how the structure of websites work (I have come from Webflow). Is there a way to make the parent of the section (the page) 100%? So the section would then be 100% of the page parent? I can do it on Webflow.
I mean make the page min height 100%
Can you share a screenshot of how it looks on iOS?
Here is a link. I set the image to 85vh and the bar at the bottom to 15vh. So it should fit perfectly in the viewport. But as you can see the bottom bar is cut off. It needs to be in % for IOS for it to fit perfectly. https://cjechurchill.wixstudio.io/my-site-3
While I donât have an iOS device to check this it does seem like there are new units for viewport height including svh, lvh, dvh and these might solve your problem.
This might also be something Wix could improve and offer in the editor.
You could try assigning classes to these sections and then specifying their height in these units. Example:
.bottomBar {
height: 15dvh;
}
.section {
height: 85dvh;
}
Some more info here:
I found this Webflow video which explains my issue perfectly. SVH is the best option, but Wix does have this. Could you forward this on to the developers and ask them to implement it please? https://www.youtube.com/watch?v=7judyqwqmKo&t=204s
1 Like
make sure your selected elements have the appropriate class attached to it (select your #bar section, where it says âCustom classesâ type in âbarâ, do the same thing for your hero section)
Another feature that might solve your issue is to select your bar section and change the position type to Sticky and stick to bottom (see this article). That would make sure that the section sticks to the bottom of the site until you scroll past it.
Thank you. I did it and it worked. Can you ask the Wix developers to implement the SVH unit?
1 Like
Iâm glad it worked!
There actually is a way to do something like this. You will have to toggle âAdvanced CSS gridâ. Then you will have to create two rows (one for your hero and one for the bar). And then you will be able to set the whole section to 100% vh, and then set the hero row to 85% and the bar to 15%.
I made a request here: Add new unit types to sizing options
1 Like