when I upload the exact same files from my computer to my server which hosts my site, on the site the grids seem to be stretched out. It is meant to look like. { https://imgur.com/a/pGyHAkB } is the link showing and here is my existing code.
I have tried changing the padding to margins and I still have this problem, am new to HTML and CSS and this is a big roadblock currently.
:root {
--typewriterSpeed: 4200ms;
--typewriterCharacters: 20;
}
body {
margin: 0;
font-family: "Inter", sans-serif;
min-height: 100vh;
display: grid;
place-content: center;
text-align: center;
background: rgb(245, 245, 245);
}
h1 {
font-size: clamp(1rem, 3vw + 1rem, 4rem);
position: relative;
font-family: "Inter", monospace;
position: relative;
width: max-content;
}
h1::before,
h1::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
h1::before {
background: rgb(245, 245, 245);
animation: typewriter var(--typewriterSpeed)
steps(var(--typewriterCharacters)) 1s forwards;
}
h1::after {
width: 0.125em;
background: black;
animation: typewriter var(--typewriterSpeed)
steps(var(--typewriterCharacters)) 1s forwards,
blink 750ms steps(var(--typewriterCharacters)) infinite;
}
.subtitle {
color: hsl(0 0% 0% / 0.7);
font-size: 2rem;
opacity: 0;
transform: translateY(3rem);
animation: fadeInUp 3s ease calc(var(--typewriterSpeed) + 2s) forwards;
}
@keyframes typewriter {
to {
left: 100%;
}
}
@keyframes blink {
to {
background: transparent;
}
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.navigation {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 0.9fr 0.9fr 1.2fr;
gap: 1em 1em;
grid-auto-flow: row;
grid-template-areas:
"nav nav nav";
color: black;
margin-top: 1rem;
z-index: 1;
}
.nav {
grid-area: nav;
color: black;
}
.nav a {
color: black;
}
.container {
margin-top: -12rem;
display: grid;
grid-template-columns: 1.2fr 0.8fr 1.2fr;
grid-template-rows: 1.1fr 0.8fr;
gap: 1em 1em;
grid-auto-flow: row;
grid-template-areas:
"about about goals"
"contact photo goals";
font-family: Inter, Serif;
padding-right: 24rem;
padding-left: 24rem;
padding-top: 10rem;
padding-bottom: 5rem;
color: white;
}
.about {
grid-area: about;
border-radius: 1rem;
background-image: linear-gradient(to bottom right, #64e8de, #8a64eb);
padding: 2rem;
text-align: center;
box-shadow:0px 0px 45px rgba(198, 55, 211, 0.15);
}
.goals {
grid-area: goals;
border-radius: 1rem;
background-image: linear-gradient(to bottom right, #78f2e9, #b65eba);
padding: 2rem;
box-shadow:0px 0px 45px rgba(42, 160, 196, 0.15);
}
.contact {
grid-area: contact;
border-radius: 1rem;
background-image: linear-gradient(to bottom right, #6ee2f5, #6454f0);
padding: 2rem;
box-shadow:0px 0px 45px rgba(175, 26, 150, 0.15);
text-align: left;
}
.contact .contact-info {
list-style-type: none;
}
.photo {
grid-area: photo;
border-radius: 1rem;
background-image: linear-gradient(to bottom right, #3499ff, #3a3985);
padding: 2rem;
box-shadow:0px 0px 45px rgba(56, 149, 255, 0.15);
}
.photo img{
width: 80%;
margin: 0 auto;
display: grid;
align-items: center;
justify-content: center;
margin-top: 25%;
}
<!DOCTYPE html>
<html>
<head>
<title>SkiesLearns</title>
<link rel="stylesheet" href="style.css">
<link href="https://rsms.me/inter/inter.css" rel="stylesheet">
</head>
<body style="background-color: rgb(245, 245, 245);">
<div>
<header>
<center>
<h1>Hey, my name is Max.</h1>
</center>
<p class="subtitle">welcome to my site</p>
</header>
</div>
<div class="navigation">
<div class="nav">
<nav>
<a href="index.html">home</a>
<a href="projects.html">projects</a>
<a href="updates.html">updates</a>
</nav>
</div>
</div>
<div class="container">
<div class="about">
<h2 align="center">About</h2>
<p>
I am a 19 year old who always has had a passion for technology. From a young age I was interested in digital
arts and that was my income as a 13 year old, as time went on I became very interested in Cyber Security.
While progressing through courses I felt that if I wanted to progress in Cyber Security I would want to know
how a program is developed (the code behind it) which has led me to start programming… which led me to falling
in love with writing code!
</p>
</div>
<div class="goals">
<h2 align="center">Goals</h2>
<h3 align="left">2022</h3>
<p align="left">
For 2022 I aim to greatly expand my knowledge with frontend and backend languages. With current experience in
HTML, CSS, Python, SQL and PowerShell I plan to learn JS, Java and React. I want to greater my understanding
with the languages I currently know and then continue my path on learning more languages.
<h3 align="left">General</h3>
<p align="left">
I plan to better myself in as many ways possible, mentally, phsyically and improve my cognative capabilities.
I am aiming high for my future and on route to succeed with my goals, step by step I am getting to where
I need to be. Hard work and determination is key.
</p>
</p>
</div>
<div class="contact">
<h2>Contact</h2>
<div>
<ul class="contact-info">
<li>max@skieslearns.com</li>
<li>+44 7746523323</li>
</ul>
</div>
</div>
<div class="photo">
<img src="./photos/skies-white.png" alt="my logo">
</div>
</div>
</body>
</html>