1 reply

position fixed and width of element

I am struggling with the width of my element which makes website background blurry. I created animation with p5js and wanted to blur it, so I added a div which covers the entire page using this code:

#app {
  display: grid;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  min-height: fit-content;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
.blur {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(60px);
}

#app {
  display: grid;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  min-height: fit-content;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
.blur {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(60px);
}

and it works fine, but when I am vertically resize my website, it doesn't change its width accordingly.
My app structure:

<template>
  <Navbar />
  <MobileNavbar />
  <RouterView></RouterView>
  <div class="blur"></div>
</template>

<template>
  <Navbar />
  <MobileNavbar />
  <RouterView></RouterView>
  <div class="blur"></div>
</template>

KP-C

Kevin Powell - Community•3y ago•

1 reply

Viroz

position fixed and width of element

I am struggling with the width of my element which makes website background blurry. I created animation with p5js and wanted to blur it, so I added a div which covers the entire page using this code:

#app {
  display: grid;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  min-height: fit-content;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
.blur {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(60px);
}

#app {
  display: grid;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  min-height: fit-content;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
.blur {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(60px);
}

and it works fine, but when I am vertically resize my website, it doesn't change its width accordingly.
My app structure:

<template>
  <Navbar />
  <MobileNavbar />
  <RouterView></RouterView>
  <div class="blur"></div>
</template>

<template>
  <Navbar />
  <MobileNavbar />
  <RouterView></RouterView>
  <div class="blur"></div>
</template>

position fixed and width of element

Similar Threads

position fixed and width of element

Similar Threads

Similar Threads

Similar Threads