Den Text zwischen der Bildschirmgröße mit @media only screen und (max-width: #px) gleich halten. ⇐ CSS

[Guest]

Ich kann nicht herausfinden, wie ich dafür sorgen kann, dass mein Text gleich bleibt, egal auf welchem ​​Bildschirm er angezeigt wird. Ich weiß nicht, ob es an meiner Position liegt, aber meine Formen passen auch nicht wirklich dazu und ich habe Probleme. Im Grunde möchte ich einfach, dass alles so bleibt, wie es aussehen soll, egal was passiert.

Code: Select all

.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;
}

Code: Select all

[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

Ich habe versucht, die Position zu ändern, aber es funktionierte nur für das quadratische Div, außer dass ich nicht wusste, was ich am Schriftzug ändern würde. Ich habe die Position des quadratischen Div geändert und es hat funktioniert, aber die Wörter verschwinden immer noch von der Seite und verschwinden, wenn sie kürzer wird, wie auf Telefonen.