Responsive Vignette

I had trouble with wide-screen monitors displaying my website properly. As part of the solution I decided to add a vignette effect (shadows on the sides). The effect appears only after a certain zoom, or screen/window size. The effect varies depending on pages (secret shop has full vignette, while everything else only has left and right gradients). The result is that on normal monitors there is a tiny bit of a shadowy gradient on the side, on wide-screen monitors it extends from the sides of the screen to where the website content starts, and on mobile it is disabled completely.

HTML:

<div id="sideGradientContainer" class="sideGradientContainer">
  <div id="sideGradientLeft" class="sideGradientLeft"></div>
  <div id="sideGradientRight" class="sideGradientRight"></div>
</div>

JAVASCRIPT:

document.addEventListener('DOMContentLoaded', function() {
const headerActions = document.querySelector('.header-actions');
let isTouch = false;
let honoraryStatus = sessionStorage.getItem('sacredButtonClicked') === 'true' ? true : false;
function checkHeader() {
const styles = window.getComputedStyle(headerActions);
isTouch = styles.getPropertyValue('display') !== 'flex';
}
checkHeader();
const sideGradientLeft = document.getElementById('sideGradientLeft');
const sideGradientRight = document.getElementById('sideGradientRight');
const gallery = document.getElementsByClassName("gallery-masonry");
var gradientWidth = 0;
const getURL = window.location.href;
var contentWidth = 2500;
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
//dynamic side gradient width
function setWidth() {
if (gallery.length <= 0 && viewportWidth > contentWidth) {
gradientWidth = (viewportWidth - contentWidth) / 2;
} else {
gradientWidth = 0;
	}
}
setWidth();
// Set the width of the side gradient elements
sideGradientLeft.style.width = `${gradientWidth}px`;
sideGradientRight.style.width = `${gradientWidth}px`;
//Adjust gradients on window resize
window.addEventListener('resize', function() {
viewportWidth = window.innerWidth;
viewportHeight = window.innerHeight;
checkHeader();
setWidth();
sideGradientLeft.style.width = `${gradientWidth}px`;
sideGradientRight.style.width = `${gradientWidth}px`;
});
//add full vignette to the veiled emporium
const fullVignette = document.createElement('div');
fullVignette.className = 'fullVignette';
fullVignette.id = 'fullVignette';
//fullVignette.style.opacity = '0';
if (honoraryStatus == true) {
const subString = 'sanctumshop';
const getURL = window.location.href;
if (getURL.includes(subString)) {
document.body.appendChild(fullVignette);
} else {
fullVignette.remove();
	}
}
// Adjust the full vignette gradient dynamically
function adjustVignetteGradient() {
if (fullVignette) {
const gradientHeight = viewportHeight * 4;
const gradientRadius = `${viewportHeight / 1.95}px`;
const transitionPosition = viewportHeight / 0.75;
const verticalRadius = `${viewportHeight * 1.6}px`;
const translateY = (gradientHeight - viewportHeight) / 1.7;
const offsetX = 51.5;
fullVignette.style.background = `radial-gradient(ellipse at ${offsetX}% center, rgba(0, 0, 0, 0) ${gradientRadius}, rgba(0, 0, 0, 0.4) ${transitionPosition}px, rgba(0, 0, 0, 0.33) ${gradientHeight}px)`;
fullVignette.style.height = `${gradientHeight}px`;
fullVignette.style.transform = `translateY(-${translateY}px)`;
    }
  }
adjustVignetteGradient();
window.addEventListener('resize', adjustVignetteGradient);
});

CSS:

#sideGradientContainer {
  display: block;
  position: fixed;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  top: 0;
  left: 0; 
  z-index: 100;
  pointer-events: none;
}
#sideGradientLeft {
  pointer-events: none;
  height: 100vh;
  width: 0;
  left: 0;
  position: absolute;
  top: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%); 
}
#sideGradientRight {
  pointer-events: none;
  height: 100vh;
  width: 0;
  right: 0;
  position: absolute;
  top: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
}
#fullVignetteContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#fullVignette {
  display: block;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5) 100%);
  z-index: 99999;
}

I suggest to only customize the vignette’s opacity in CSS and do the rest in JS. This because the gradient itself and the scaling of the DIVs is handled in JS.