I'm looking for a way to keep my footer at the bottom of my page when changing resolution. As you can see it's position is currently fixed but even when changing it to relative it's behaving strangely.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
<title>Frontend Mentor | QR code component</title>
</head>
<body>
<main>
<article class="card">
<div class="card__img">
<img src="https://i.imgur.com/bzXEqJP.png" alt="QR Code redirecting to the Frontend Mentor website" />
</div>
<div class="card__content">
<h1 class="card__title">Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
</article>
</main>
<footer>
<div class="attribution">
Coded by <a href="">Willson</a>.
</div>
</footer>
</body>
</html>
/*
1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
/*
2. Remove default margin
*/
* {
margin: 0;
}
/*
3. Allow percentage-based heights in the application
*/
/* html,
body {
height: 100%;
} */
/*
Typographic tweaks!
4. Add accessible line-height
5. Improve text rendering
*/
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/*
6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
/*
7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
font: inherit;
}
/*
8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
/*
9. Create a root stacking context
*/
#root,
#__next {
isolation: isolate;
}
:root {
--clr-white: hsl(0, 0%, 100%);
--clr-light-gray: hsl(212, 45%, 89%);
--clr-grayish-blue: hsl(220, 15%, 55%);
--clr-dark-blue: hsl(218, 44%, 22%);
--ff-regular: "Outfit", sans-serif;
--fs-regular: 0.938rem;
--fw-regular: 400;
--fw-bold: 700;
}
/* general styling */
body {
font-family: var(--ff-regular);
font-weight: var(--fw-regular);
font-size: var(--fs-regular);
color: var(--clr-grayish-blue);
background-color: var(--clr-light-gray);
/* specific */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* card styles */
.card {
--content-padding: 1.25rem;
--content-spacing: 1rem;
background-color: var(--clr-white);
border-radius: 1.25rem;
overflow: hidden;
padding: 1rem;
margin: 1.5rem;
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}
@media (min-width: 600px) {
.card {
width: 330px;
}
}
.card__content {
text-align: center;
display: grid;
padding: var(--content-padding);
gap: var(--content-spacing);
}
.card__content > h1,
p {
line-height: 1.25;
}
.card__title {
font-weight: var(--fw-bold);
color: var(--clr-dark-blue);
}
.card__img > img {
border-radius: 0.75rem;
height: auto;
}
footer {
width: 100%;
position: fixed;
bottom: 0;
}
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
I tried changing the position from fixed to absolute but it didn't work as expected.
Thank you & have a nice day.
