I'm having a problem with my website. I have a div with animated text on the right side of the page and a div with some text on the left side. Everything works fine with 1920x1080 resolution but when I make the page smaller or change the resolution, the div with animated text just doesn't stay in its own position and pushes the left div to the bottom. I don't know how to fix this. I want to make that both divs will resize automatically on smaller resolution or when someone makes resize the window to fit the size of the screen.
How it looks with 1920x1080 resolution:
How it looks like with 1600x1024 resolution: 
And here when I'm resizing the window: 
HTML:
<!DOCTYPE html>
<html lang="english">
<head>
<title>Little Hero | A simple indie game</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="ikona.png">
<meta name="description" content="Small indie game developed by one person using pygame module in python focusing on rogue-like experience.">
<meta name="keywords" content="PC, game, pixel, indie, Steam, python, pygame, development">
<meta charset="utf-8">
<meta name="language" content="english">
<meta name="author" content="all: censored; censored">
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow, snippet, archive">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<header>
<nav>
<ul>
<div class="informacni_odkazy">
<li><a href="" title="Learn more about this game">LEARN MORE</a></li>
<li><a href="" title="Check updates">UPDATES</a></li>
<li><a href="" title="Where you can contact me">CONTACT</a></li>
</div>
<div class="herni_odkazy">
<li><a href="" title="Register">SIGN UP</a></li>
<li><a href="" title="Buy the game">PLAY NOW</a></li>
</div>
</ul>
</nav>
</header>
<section class="pozadi_nadpisu">
<div class="animovany_text">
<p><span></span></p>
</div>
<div class="nadpisy_stranky">
<h1>Little Hero</h1>
<h2>Dive into an epic adventure with a rogue-like experience.</h2>
</div>
</section>
<section class="formular">
<h3>Why sign up?</h3>
<p>Everyone who sign-ups for this game gives me feedback to continue in development. Once this game is finished I will be sending a few free copies randomly among the registered emails.</p>
<form>
<div class="email">
<label for="email">Email address</label>
<input type="email" name="email" required>
</div>
<div class="duvod">
<label for="duvod">Why I'm looking forward to this game</label>
<textarea name="duvod" id="duvod" cols="50" rows="10" minlength="20" required></textarea>
</div>
<div class="tlacitko">
<button type="submit">Sign up</button>
</div>
</form>
</section>
<footer>The game is still in progress, once the game is finished everyone registered will receive an email about the release date.</footer>
</body>
</html>
CSS:
* {
font-size: 62.5%;
}
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
header {
position: sticky;
top: 0%;
}
.informacni_odkazy {
float: left;
}
.informacni_odkazy li {
margin-left: 3rem;
margin-right: 2rem;
padding-top: 2.5rem;
list-style: none;
}
.informacni_odkazy a {
color: rgb(255, 255, 255);
text-decoration: none;
font-size: 2rem;
}
.informacni_odkazy a:hover {
border-bottom: 0.1rem solid rgb(1, 174, 255);
padding-bottom: 1rem;
}
.herni_odkazy {
float: right;
}
.herni_odkazy li {
margin-left: 1rem;
margin-right: 3rem;
padding-top: 2.5rem;
list-style: none;
}
.herni_odkazy a {
color: rgb(255, 255, 255);
font-size: 3rem;
text-decoration: none;
border: 0.2rem solid rgb(1, 174, 255);
border-radius: 0.1rem;
padding: 1rem;
}
.herni_odkazy a:hover {
background: rgb(1, 174, 255);
}
nav li {
float: left;
}
.pozadi_nadpisu {
background-image: url(pozadi_1.gif);
background-size: cover;
height: 35rem;
padding-bottom: 20rem;
text-align: center;
padding-top: 15rem;
}
.nadpisy_stranky {
float: left;
border: 0.2rem solid black;
border-radius: 5rem;
background: rgba(209, 192, 192, 0.25);
width: 70rem;
padding: 3rem;
margin-left: 20rem;
text-shadow: 0.5rem 0.5rem 0.5rem black;
}
.nadpisy_stranky h1 {
color: rgb(116, 164, 253);
font-size: 6rem;
margin-bottom: 2rem;
}
.nadpisy_stranky h2 {
color: rgba(255, 255, 255, 0.863);
font-size: 4rem;
}
.animovany_text {
float: right;
}
.animovany_text p {
background: rgb(255, 255, 255, 0.5);
border: 0.5rem solid black;
height: 15rem;
width: 50rem;
margin-top: 8.5rem;
margin-right: 20rem;
padding-bottom: 1rem;
color: rgb(0, 0, 0);
font-size: 12rem;
}
span:before {
content: "";
animation: animuj infinite 8s;
}
@keyframes animuj {
0% {
content: "LEARN";
}
25% {
content: "FIGHT";
}
50% {
content: "EXPLORE";
}
75% {
content: "IMPROVE";
}
100% {
content: "SURVIVE!";
}
}
.formular {
font-size: 5rem;
background-image: url(pozadi.gif);
background-size: cover;
height: auto;
padding-top: 15rem;
padding-bottom: 15rem;
border-top: 0.5rem solid black;
max-width: 100%;
}
.formular form {
border: 0.5rem solid rgba(255, 255, 255, 0.801);
border-radius: 5rem;
background: rgba(255, 255, 255, 0.377);
padding: 5rem 1rem 5rem 1rem;
width: 90rem;
margin-left: auto;
margin-right: auto;
}
.formular h3,
p {
color: rgb(255, 255, 255);
text-align: center;
margin-left: auto;
margin-right: auto;
width: 100rem;
margin-bottom: 5rem;
}
.formular h3 {
font-size: 5rem;
}
.email {
border-bottom: 0.3rem solid black;
padding: 1rem;
width: 70rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.email label {
font-size: 4rem;
margin-right: 1rem;
}
.email input {
width: 37rem;
height: 3rem;
font-size: 2rem;
border: 0.2rem solid black;
border-radius: 0.5rem;
background-color: transparent;
text-align: center;
}
.duvod {
border-bottom: 0.3rem solid black;
margin-top: 1rem;
padding: 1rem;
width: 70rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.duvod label {
font-size: 4rem;
}
.duvod textarea {
margin-top: 1rem;
font-size: 3rem;
height: 20rem;
width: 70rem;
resize: none;
border: 0.2rem solid black;
border-radius: 0.5rem;
background-color: transparent;
}
.tlacitko {
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 1rem;
}
.tlacitko button {
font-size: 3rem;
font-weight: bold;
border: 0.35rem solid rgb(0, 0, 0);
background: none;
width: 70rem;
height: 5rem;
}
.tlacitko button:hover {
background: rgba(255, 255, 255, 0.9);
}
footer {
background-color: rgb(46, 43, 43, 0.85);
padding: 1rem;
color: white;
font-size: 2rem;
text-align: center;
}
The two divs you are looking for are:
.nadpisy_stranky .nadpisy_stranky h1 .nadpisy_stranky h2
.animovany_text .animovany_text p
Aucun commentaire:
Enregistrer un commentaire