I’m a web development student working on a project. I have two elements on my page:
A heading with a gradient (subheading gradient-text).
A button (next-button).
I need both elements to appear on the same line at the bottom of the page. The heading should be aligned to the left, and the button should be aligned to the right. This works fine on my laptop, but on my campus laptop, the elements do not stay in parallel and their positions shift.
Here’s the relevant CSS and HTML code I’m using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.subheading {
font-family: 'Georgia', cursive;
font-size: 30px;
font-weight: 9000;
line-height: 1.5;
padding-left: 150px;
margin: 0;
margin-left: 10px;
margin-top: 80px;
}
.gradient-text {
font-size: 30px;
font-weight: 9000;
background: linear-gradient(270deg, #5b42f3, #ff00a0, #ffcc00, #5b42f3);
background-size: 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient-animation 5s ease infinite;
margin: 0;
line-height: 1.5;
letter-spacing: 0.08em;
margin-left: 10px;
margin-top: 80px;
}
@keyframes gradient-animation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.next-button {
position: fixed;
bottom: 157px;
right: 375px;
z-index: 10;
display: flex;
align-items: center;
gap: 1px;
font-family: 'Georgia', cursive;
color: rgb(19, 9, 9);
font-weight: bold;
text-decoration: none;
border-radius: 6px;
padding: 3px 6px;
transition: background-color 0.3s;
}
.next-button svg {
width: 30px;
height: 30px;
}
.next-button:hover {
color: rgb(155, 55, 9);
font-weight: bold;
}
.next-button:hover svg {
stroke: rgb(155, 55, 9);
}
</style>
</head>
<body>
<h2 class="subheading gradient-text"> Lorem ipsum </h2>
<a href="home.html" class="next-button">
Continue
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="9 18 15 12 9 6" />
</svg>
</a>
</body>
</html>
You need to sign in to view this answers
Leave feedback about this