CSS
.body {
background: linear-gradient(-45deg, rgb(255, 0, 0), rgba(216, 29, 29, 0.856), #fdfdfdd7, #234cd5, #ffffff);
background-size: 400% 400%;
background-repeat:no-repeat;
animation: gradient 35s ease infinite;
height: 100vh;
}
HTML
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<script src="./listener.js" type="text/javascript"></script>
<body class="body">
<div id="container">
<title>Police 10 Codes</title>
<h1>LSPD Ten Codes</h1>
<img src="https://i.ibb.co/2vNZgd9/lspd-removebg-preview.png" alt="LSPD Image"style="width:150px;height:150px;">
<div class="dropdown">
<button class="dropbtn">Non-Serious</button>
<div class="dropdown-content">
<a href="#">10-1 Unable to Copy / Weak Signal</a>
<a href="#">10-3 Stop Transmitting</a>
<a href="#">10-4 Affirmative / Understood</a>
<a href="#">10-7 Out of Service</a>
<a href="#">10-8 In Service</a>
<a href="#">10-12 Stand by</a>
<a href="#">10-17 En-route to Scene</a>
<a href="#">10-19 Return to Station/Location</a>
<a href="#">10-20 Location</a>
<a href="#">10-22 Disregard</a>
<a href="#">10-23 Arrived at Scene</a>
<a href="#">10-24 Assignment Complete</a>
<a href="#">10-30 Traffic Stop</a>
<a href="#">10-36 Correct Time</a>
<a href="#">10-37 Suspicious Vehicle</a>
<a href="#">10-40 Run Silent No Lights/Siren</a>
<a href="#">10-53 Road Blocked</a>
<a href="#">10-56 Intoxicated Pedestrian</a>
<a href="#">10-58 Direct Traffic</a>
<a href="#">10-59 Convoy / Escort</a>
<a href="#">10-60 In the Area</a>
<a href="#">10-61 Clear for Radio Traffic</a>
<a href="#">10-74 Negative</a>
<a href="#">10-77 ETA</a>
<a href="#">10-68 Dispatch Information</a>
<a href="#">10-92 Improper parking</a>
</div>
</div>
<div class="dropdown2">
<button class="dropbtn2">Medium</button>
<div class="dropdown2-content">
<a href="#">10-0 Use Caution</a>
<a href="#">10-10 Fight in Progress</a>
<a href="#">10-25 Report in person</a>
<a href="#">10-26 Detaining/Arresting Subject</a>
<a href="#">10-29 Warrant Check</a>
<a href="#">10-31 Crime in progress</a>
<a href="#">10-50 Traffic Crash</a>
<a href="#">10-55 DUI</a>
<a href="#">10-57 Hit & Run</a>
<a href="#">10-78 Requesting backup</a>
<a href="#">10-80 Fire Alarm</a>
<a href="#">10-94 Street Racing</a>
<a href="#">10-96 Mental Patient</a>
</div>
</div>
<div class="dropdown3">
<button class="dropbtn3">Serious</button>
<div class="dropdown3-content">
<a href="#">10-18 Urgent</a>
<a href="#">10-32 Person with Gun</a>
<a href="#">10-39 Run with Lights/Siren</a>
<a href="#">10-67 Report of Death</a>
<a href="#">10-80 Pursuit in Progress</a>
<a href="#">10-82 Fire in Progress</a>
<a href="#">10-89 Bomb Threat</a>
<a href="#">10-90 Bank Alarm</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Whenever I check this code, the size of the .body class keeps readjusting. I have a #container ID class that is meant to control the opening and closing of the UI. The UI works fine, but the problem lies in the fact that the size of the .body class keeps changing. I want it to remain at its current settings, either 400% 400% or fit perfectly for full-screen viewing. Any assistance on this matter would be greatly appreciated. Thank you.