Сделать текст одинаковым между размером экрана, используя только экран @media, и (максимальная ширина: #px) ⇐ CSS

[Anonymous]

Я не могу понять, как переместить текст, и я новичок в кодировании HTML и CSS. Я не знаю, моя ли это позиция, но мои формы тоже этого не делают, и я борюсь с трудностями. Вот что я хочу изменить размеры. Мне просто нужен весь код, чтобы иметь возможность реагировать на изменения размера экрана.

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

.about {
display: inline-block;
position: absolute;
top: 30px;
right: 1100px;
z-index: 5;
text-decoration: none;
color: rgb(255, 255, 255);
font-size: 20px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

.about::before{
content:" ";
position:absolute;
top: 20px;
width:100%;
height:2px;
background-image: linear-gradient(white, rgb(107, 209, 209));
transform:scalex(0);
transition:.5s ease-in-out;
transform-origin:left;
}

.about:hover::before{
transform:scalex(1);
}

.contact {
position: absolute;
top: 30px;
right: 600px;
z-index: 3;
text-decoration: none;
color: rgb(255, 255, 255);
font-size: 20px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.contact::before{
content:" ";
position:absolute;
top: 20px;
width:100%;
height:2px;
background-image: linear-gradient(white, rgb(107, 209, 209));
transform:scalex(0);
transition:.5s ease-in-out;
transform-origin:left;
}

.contact:hover::before{
transform:scalex(1);
}

.preview {
position: absolute;
top: 30px;
right: 850px;
z-index: 3;
text-decoration: none;
color: rgb(255, 255, 255);
font-size: 20px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.preview::before{
content:" ";
position:absolute;
top: 20px;
width:100%;
height:2px;
background-image: linear-gradient(white, rgb(107, 209, 209));
transform:scalex(0);
transition:.5s ease-in-out;
transform-origin:left;
}

.preview:hover::before{
transform:scalex(1);
}

.home {
position: absolute;
top: 30px;
right: 1500px;
z-index: 3;
text-decoration: none;
color: rgb(255, 255, 255);
font-size: 20px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.home::before{
content:" ";
position:absolute;
top: 20px;
width:100%;
height:2px;
background-image: linear-gradient(white, rgb(107, 209, 209));
transform:scalex(0);
transition:.5s ease-in-out;
transform-origin:left;
}

.home:hover::before{
transform:scalex(1);
}

.shop {
position: absolute;
top: 30px;
right: 1330px;
z-index: 3;
text-decoration: none;
color: rgb(255, 255, 255);
font-size: 20px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

.shop::before{
content:" ";
position:absolute;
top: 20px;
width:100%;
height:2px;
background-image: linear-gradient(white, rgb(107, 209, 209));
transform:scalex(0);
transition:.5s ease-in-out;
transform-origin:left;
}

.shop:hover::before{
transform:scalex(1);
}

.title {
position: absolute;
bottom: 810px;
left: 20px;
z-index: 2;
color: rgb(255, 255, 255);
font-size: 30px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.square {
z-index: 1;
height: 80px;
width: 100%;
background-color: #0095c2;
position: absolute;
top: 0px;
left: 0px;
right: 50px;
}

.circle {
position: absolute;
top: -50px;
left: 1300px;
height: 700px;
width: 100%;
background-image: linear-gradient(to top, #0095c2, white);
border-radius: 50%;
display:  inline-block;
}

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

[url=/AboutMe/About.html]about me[/url]
[url=/shop/Shop.html]shop[/url]
[url=/homePage/testWebsite.html]home[/url]
[url=/preview/preview.html]preview[/url]
[url=/contact/contact.html]contact us[/url]
test website

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

Подробнее здесь: https://stackoverflow.com/questions/793 ... en-and-max