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://i.sstatic.net/5zIq3.jpg } 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>[email protected]</li>
<li>+44 7746523323</li>
</ul>
</div>
</div>
<div class="photo">
<img src="./photos/skies-white.png" alt="my logo">
</div>
</div>
</body>
</html>Don't use large values of padding to position elements. This will be troublesome when going for a responsive design, and will cause overflow issues. Instead just use margin: auto; as a substitute. Then you can add a max-width onto your container so that it does not stretch the full width of the screen.
I also added a sample media query for an option of what you could do on mobile for the layout.
: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: auto;
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;
color: white;
max-width: 1200px;
}
@media only screen and (max-width: 800px) {
.container {
display: block;
margin: 0 1em;
}
.container > div {
margin: 1em 0;
}
}
.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>
</div>
<div class="contact">
<h2>Contact</h2>
<div>
<ul class="contact-info">
<li>[email protected]</li>
<li>+44 7746523323</li>
</ul>
</div>
</div>
<div class="photo">
<img src="./photos/skies-white.png" alt="my logo">
</div>
</div>
</body>
</html>