Сетки растягиваются на действующем сайте, но не в локальном файле
когда я загружаю точно такие же файлы со своего компьютера на свой сервер, на котором размещен мой сайт, на сайте сетки кажутся растянутыми. Это должно выглядеть. {https://imgur.com/a/pGyHAkB} показывает ссылку, и вот мой существующий код.
Я попытался изменить отступы на поля, и у меня все еще есть эта проблема, я новичок в HTML и CSS, и в настоящее время это большое препятствие.
: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>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
1
33
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Попробуйте добавить
.container {
max-width: 1200px;
margin: -12rem auto 0;
}
Единственная проблема, которую я вижу, заключается в том, что она растягивает мою сетку и оставляет большой зазор между панелью навигации и контейнером.
—
17.03.2022 17:30
Я обновил код.
—
17.03.2022 17:35
Ответ принят как подходящий
Не используйте большие значения заполнения для позиционирования элементов. Это будет проблематично при переходе на адаптивный дизайн и вызовет проблемы с переполнением. Вместо этого просто используйте margin: auto; в качестве замены. Затем вы можете добавить max-width в свой контейнер, чтобы он не растягивался на всю ширину экрана.
Я также добавил образец медиа-запроса для варианта того, что вы можете сделать на мобильном устройстве для макета.
: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>Другие вопросы по теме
Измените размер буква за буквой слова, но сохраняя отступы между буквами
У меня проблемы с серией и подсчетом процента побед в моей игре на JavaScript
Bootstrap размещает элемент посередине
Граница на всю ширину сетки
Javascript работает только для одного элемента, только для первого
Таблицы и их содержимое отодвигаются в сторону — почему?
Как разместить изображение в div нестатического размера?
Как добавить текст и img в кнопку значения с помощью jquery
Упорядоченный список 1, 1.1, а
Как разместить строку меню и логотип с помощью css?
Похожие вопросы
У меня проблемы с серией и подсчетом процента побед в моей игре на JavaScript
Как получить содержимое определенного значения атрибута в каждом цикле jquery
Граница на всю ширину сетки
Javascript работает только для одного элемента, только для первого
Нулевая ошибка при использовании document.getElementById()
Таблицы и их содержимое отодвигаются в сторону — почему?
Как разместить изображение в div нестатического размера?
Как получить текст между двумя наборами тегов в python
Как сделать выпадающее меню, которое меняет цвет фона
Как добавить текст и img в кнопку значения с помощью jquery
Что именно здесь не так? Может быть, выложить фото?