So I'm writing an exit button for an electron-based client, and after researching how to resize it based on the screen size, a white space appears next to the button. It also creates a giant white box underneath when I try to move it to the correct position. Does anyone know why this is happening and can help me fix it?
<body>
<webview src="https://bapbap.gg"></webview>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo+Black">
<style>
body {
display: flex;
flex-direction: column;
margin: 0;
height: 100vh;
position: relative;
}
webview {
flex: 1;
}
.ExitButton {
cursor: pointer;
text-align: center;
font-size: 10px;
font-family: 'Archivo Black';
color: #6B7075;
border-color: transparent;
background-color: transparent;
transition-duration: 0.5s;
transform: translate(700px, 300px);
}
.ExitButton:hover {
background-color: rgb(150, 5, 5);
transition-duration: 0.5s;
}
.nav {
display: flex;
}
</style>
<div class="nav">
<button class="ExitButton" onclick="alert('Are you sure you want to exit BapClient?')">EXIT</button>
</div>
</button>
</body>
P粉5503233382023-09-16 12:01:17
In class ExitButton, transform: translate(700px, 300px);This line is responsible for moving the button from [0,0] to the point you mentioned: [700,300 ].
By removing this line of code, you can place the button in the upper left corner of the page. You can then change its position to anywhere you want using grid, layout, etc.