Full height on websites

I’ve been using Sparkle for some time now - but I’ve always get frustrated when I try to do Hero one-pages, meaning a big image that covers all the height.

Can someone enlighten me on how to make this properly? The issue is as follows:

You see the black bar at what would be the footer? I don’t want that. But either stretching the box or lowering the Sparkle bar just adds more blank space below the page.

I’ve tried to add some CSS with an embed code with a ID to the box that’s being the background using the following code:

<style> #hero {height: 100vh;} </style>

It just doesn’t work.

I’ve also tried to stretch the height manually, but it only adds more black space (since the page have a black background).

Heres how everything is set-up:

I really don’t know what to do here - and I mostly only do this type of website.

If anyone have done something like this, I’d love to know how or if even’s possible. Would love some input too, @duncan !

Thanks and great weekend guys!

1 Like

disclaimer. I’m really really new to sparkle. this is just my second day. so I’m really no way expert at this. but I’m trying to learn this app by looking at the questions in this community.

anyway. I tried doing a solution for your full height. I don’t know if this is really what you want. but hope this is the solution your looking for. I just made the height to 1440px. I attached an image for the sample.

1 Like

It’s not a good solution, because it will have scrolling and will change the position of the background image off from what’s desired, plus the black bar will stay there. It was a good try nonetheless, thank you! Hope you’re learning a lot from the forum and enjoying Sparkle! :slight_smile:

Okay, I’ve managed. Everything looks smooth now, so we’re good. Thanks everyone.

Hi Primo, congratulations.
This screen looks great.

BTW, what is the solution?
ZbR

1 Like

@primo looks great Primo. Although in your original post I can’t see the black bar at the bottom of which you speak. I’m probably missing something . I’ve done full height covers before, but never got hooped on the footer.
If there was one I either made it transparent or used the “don’t show” option.

1 Like

Adding support for adaptation of content to the browser viewport height (100vh and similar, in css) has layout implications that make it something not as simple as it looks to add in Sparkle. We are aware of the issue.

Adding the css yourself can work for some layouts, but we can’t guarantee it will always work, because Sparkle’s code is self-consistent, but can’t always play well with the side effects of code that it doesn’t control.

1 Like

i’ve fiddled with more CSS solutions - not ideal, but it will do for now. I’ve added some extra code directly to the end file. Thanks for the feedback!

@Woodrow oh, it’s on the first picture - a big black bar below the background. When it’s a single color background, I don’t have any problem, but with pictures generally I have to do something else. Thanks for the feedback!

@duncan it’s fine! hope we’ll see some future solutions for this kind of endeavor. Thanks for the clarification!

Hi

Could you share more details about how you did that?
Experiencing the same here and I’d love to make it work…

best

Hey Benoit!

Sure.

What i did was simple (it only works with the Box widget):

Place the Box, go to the “Arrange” tab and set it to full page width

After that, yet in the “Arrange” tab, set the code integration id to any you’d like (I’ll use “hero” on this code)

OBS: If you do not see the “Code Integration” option, go to Settings → Miscellaneous → “Allow HTML element id customization”
Captura de Tela 2021-09-02 às 17.20.52

After you’ve set the id, go to the widgets menu and add a special “Embed” widget
Captura de Tela 2021-09-02 às 17.23.54

On the Embed widget, you gonna write this piece of code:

Also don’t forget to enable “Content expands vertically” and deactivate “Activate After Consent”.

There you go! The box will be full height. Now you’ll just need to adjust stuff accordingly to the device.

Remember, it only works with Box widget!

3 Likes

Very Cool thanks!!!
:pray:

Hello Primo,

I was looking for the full height solution when I came across this post. The full browser height hero banner has always been a big question mark for me and nowhere there is a solution for this. Even Sparkle documentation does not mention this anywhere. Thank you so much for the solution, I was able to achieve this effect today.

Thanks,
Ujjwal