Отображение веб-страницы на разных типах экранов ⇐ CSS

[Anonymous]

Я пытаюсь сделать веб-страницу единообразной для всех типов экранов, вот фрагмент кода, это заголовок...

Код: Выделить всё

@import url('(https:fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap)');

/* Global Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: 'Poppins', sans-serif;
background-color: #f0f0f0;
}

/* Header Styles */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
}

header .logo {
position: fixed;
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}

header ul {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
}

header ul li {
list-style: none;
margin-right: 20px;
}

header ul li a {
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}

header ul li a:hover {
background: #fff;
color: #333;
}

/* Responsive Design */
/* Mobile Devices (480px and below) */
@media only screen and (max-width: 480px) {

body {
font-size: 14px;
}

.header {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align: center;
padding: 30px 100px;
background-color: #333;
color: #fff;
justify-content: space-between;
align-items: center;

}

header .logo {
color: #fff;
left: 0;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}

header ul {
display: flex;
justify-content: center;
align-items: center;
}

header ul li {
list-style: none;
margin-right: 20px;
}

header ul li a {
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}

header ul li a:hover {
background: #fff;
color: #333;
}

.nav-links {
display: block;
margin-bottom: 20px;
}
}

/* Tablets and Small Laptops (481px to 768px) */
@media only screen and (min-width: 481px) and (max-width: 768px) {
header {
padding: 25px 75px;
}
}

Код: Выделить всё

[url=#]LOGO[/url]
[list]
[*][url=#]Home[/url]
[*][url=search.html]Search[/url]
[*][url=videos.html]Videos[/url]
[/list]

Был добавлен код адаптивного дизайна, но он не работает работают отлично... Различные элементы были отредактированы, но после уменьшения экрана результат не стал идеальным. Было бы неплохо получить отзыв и помощь по этому вопросу

Подробнее здесь: https://stackoverflow.com/questions/790 ... reen-types