KPC
Kevin Powell - Community•2y ago
SaaikaHatak

100vh on facebook browser

I am trying to do 100vh hero and it works fine on chrome, but because of bottom navigation it resizes background image every time bottom navigation pops out/in
4 Replies
~MARSMAN~
~MARSMAN~•2y ago
Are you using any window resize eventListener on the hero section? A codepen would be great
MarkBoots
MarkBoots•2y ago
There is a solution for this: "dynamic viewport units". It has just launched a couple of weeks ago in a couple of browsers (not all yet, and users have to update their browers). I don't know what facebook uses, but try and use 100dvh or 100dvmax To make sure there is a fallback first set the height in vh 
body {
  height: 100vh;
  height: 100dvh;
}
body {
  height: 100vh;
  height: 100dvh;
}
more about this: Kevin: https://www.youtube.com/watch?v=5m6JOJLy5B0 Browser support: https://caniuse.com/viewport-unit-variants
SaaikaHatak
SaaikaHatak•2y ago
It is just a simple container with background image that is centered and fixed. It works fine on chrome. But using Facebook browser It keeps resizing It. I can make codepen for you. Or Give you netlify/github link. Here. Video for you
SaaikaHatak
SaaikaHatak•2y ago
Okay. Most browsers work now. Problem was with not supporting scale CSS. But Facebook browser doesnt support even transform
Want results from more Discord servers?
Add your server
More Posts
Making an image stand outI have been trying to make this images: https://myntsu.github.io/e-commerce-sample/landing-page/#AboforEach methodi'm finding it difficult to understand this code snippet? could someone please tell me what the `sliTake full space of the grid colI want my content to take the full space of the grid and not leave white space but I cant get it to Filter not on childHi, i'm trying to make an effect where the background is grayscale 100% and the child isn't while usMaking a transition responsiveI've been using a background transition for a hover effect on links. It works all right, but it breacan I use has selector to look for any new css classes that were added dynamically ?I wanted to use `:has` selector to look for a class named `dark-mode` that is added dynamically in rSVG animationhttps://codepen.io/aldrinbright/pen/qBKqRmM Anyone familiar with svg animation? I want to animate thNavbar not expanding to the full width of the screenWell hello there, can anyone please tell me how to fix the nav bar? HTML code for *Projects*. ```htauto-fill vs auto-fit?Title ^ I checked other articles and StackOverflow like this one here: https://stackoverflow.com/quDisable **all** notifications, including errorsVSCode has a "do not disturb" mode which will silence all notifications. Perfect, that's what I want