Hi there,
on my website I use the radzen footer to hold my call to action button. It follows the default layout like:
<RadzenLayout>
<RadzenHeader>
...
</RadzenHeader>
<RadzenBody>
...
</RadzenBody>
<RadzenFooter>
<btn>Create Passport Photo</btn>
</RadzenFooter>
</RadzenLayout>
However, on an iPhone in Safari, the footer is covered by the bottom bar which seems to be a common problem on iphones.
As you see. In Vertical mode the bottom bar covers my footer. The light purple that shines through the bottom bar is my beloved footer.
On Horizontal mode, the bottom bar i.e. disappears and reveals my footer.
I tried different solutions that I found on Stackoverflow unrelated to radzen, but none of them worked 
You can check the website here: Passbild-selbermachen.com
Hi @Chris_Rauser,
Good work on the website! 
Found some issues:
<RadzenLayout> should be direct descendant of <body>:
<body>
<RadzenLayout ...>
- Not sure why, but the footer is initially hidden and appears on scroll, is there any custom logic?
- Try adding the following CSS to your styles:
@media (max-width: 767px) {
.rz-layout {
height: 100dvh !important;
}
}
100dvh refers to 100% of the dynamic viewport height — meaning the value will change as the user scrolls. More info here.
1 Like
Hi Yordanov,
Thank you so much for your advice, it worked!
And thank you for the compliment 
Radzen came in really handy here!
For the other two points:
<RadzenLayout> should be direct descendant of <body>:
<body>
<RadzenLayout ...>
- I went in as a copy cat on radzen landingpage and replicated this cool moving background together with part of the structure. I could not find any disadvantage yet of having it like that. But will put it in my backlog to fix it as soon as I find the time.
<body class="home">
<div class="wrapper">
<main class="gradient-bg">
<RadzenLayout ...>
- Not sure why, but the footer is initially hidden and appears on scroll, is there any custom logic?
- Correct! In many websites I have seen, they have their landing page with hero image + call to action button. And once you scroll down, the action button appears at the bottom. So I hide the footer first and once you scroll down more than 400 something px I unhide it to have the same effect. First I tried a floating button at the bottom, but then RadzenFooter did the job.
1 Like
