I have a "stupid" problem that I can't solve: when I resize the viewport, the text overlaps me and it all goes wrong. I know this can be solved by responsive, but I'm not quite sure how to do it yet. Anyone know?
body {
background-image: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(208,58,58,1) 50%, rgba(252,69,115,1) 100%);
overflow: hidden;
}
h1.titolo {
color: white;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
position: absolute;
top: 0 !important;
left: 0 !important;
width: 100%;
max-width: 100vw;
padding: 0 60% ;
padding-top: 15%;
text-align: left;
font-size: 7vh;
}
p.descrizione-gioco {
color: white;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
position: absolute;
font-weight: 600;
top: 0 !important;
left: 0 !important;
width: 58%;
max-width: 100vw;
padding: 0 60% ;
padding-top: 21%;
text-align: left;
font-size: 1.8vh
}
a {
color: white;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
text-decoration: none;
font-weight: bold
}
a:hover {
color: white;
text-decoration: none
}
.animate__animated.animate__fadeInRight {
width: 300px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
border: none;
background-size: 300% 100%;
border-radius: 50px;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
position: absolute;
left: 59%;
top: 50%;
--animate-duration: 1.45s;
}
.animate__animated.animate__fadeInRight:hover {
background-position: 100% 0;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.animate__animated.animate__fadeInRight:focus {
outline: none;
}
.animate__animated.animate__fadeInRight.azionamento {
background-image: linear-gradient(
to right,
#ed6ea0,
#ec8c69,
#f7186a,
#fbb03b
);
box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}<!DOCTYPE html>
<html lang="it" >
<head>
<meta charset="UTF-8">
<title>Man run</title>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
<body>
<div class="titolo">
<h1 class="titolo" data-aos="fade-left" data-aos-duration="1500">Man Run</h1>
</div>
<div class="descrizione">
<p class="descrizione-gioco" data-aos="fade-left" data-aos-duration="1700">Un gioco totalmente casuale, creato da Andrea Nassi della classe <a href="https://3binformatica.eu">3B Informatica.</a></br> Semplice ed intuitivo, muoviti con le freccie e schiva gli ostacoli!. </br> Scarica il gioco da qua sotto!</p>
</div>
<a href="/"><button class="animate__animated animate__fadeInRight azionamento">Download</button></a>
</body>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
</script>
</html>I tried to search on the internet, and I didn't quite understand how to do it. I leave you the code for those who want to help me (it's the first time I've tried to do the responsive)
CodePudding user response：
This should solve your problem. I covered all the elements in one div.container added position:absolute and removed it from the child elements. for you to have one control.
body {
background-image: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(208,58,58,1) 50%, rgba(252,69,115,1) 100%);
overflow: hidden;
}
.container {
position: absolute;
top: 0;
right: 10px;
padding-top: 15%;
}
h1.titolo {
color: white;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
width: 100%;
max-width: 100vw;
text-align: left;
font-size: 7vh;
}
p.descrizione-gioco {
color: white;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 600;
width: 58%;
max-width: 100vw;
text-align: left;
font-size: 1.8vh;
}
a {
color: white;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
text-decoration: none;
font-weight: bold
}
a:hover {
color: white;
text-decoration: none
}
.animate__animated.animate__fadeInRight {
width: 300px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
margin-left: 0;
height: 55px;
text-align:center;
border: none;
background-size: 300% 100%;
border-radius: 50px;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
--animate-duration: 1.45s;
}
.animate__animated.animate__fadeInRight:hover {
background-position: 100% 0;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.animate__animated.animate__fadeInRight:focus {
outline: none;
}
.animate__animated.animate__fadeInRight.azionamento {
background-image: linear-gradient(
to right,
#ed6ea0,
#ec8c69,
#f7186a,
#fbb03b
);
box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<div class="container">
<div class="titolo">
<h1 class="titolo" data-aos="fade-left" data-aos-duration="1500">Man Run</h1>
</div>
<div class="descrizione">
<p class="descrizione-gioco" data-aos="fade-left" data-aos-duration="1700">
Un gioco totalmente casuale, creato da Andrea Nassi della classe
<a href="https://3binformatica.eu">3B Informatica.</a>
<br /> Semplice ed intuitivo, muoviti con le freccie e schiva gli ostacoli!.
<br /> Scarica il gioco da qua sotto!</p>
</div>
<a href="/"><button class="animate__animated animate__fadeInRight azionamento">Download</button></a>
</div>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
</script>CodePudding user response：
Media query??? (and change widths if you need to):
/* Media Query for Tablet Viewport */
@media screen and (min-width: 650px), print {
.grid {
display: grid;
grid-template-columns: auto auto;
grid-gap: 25px;;
}
aside {
grid-column: 1 / span 2;
}
/* Media Query for Desktop Viewport */
@media screen and (min-width: 1024px), print {
.grid {
display: grid;
grid-template-columns: auto auto;
}
aside {
grid-column: 1 / span 2;
}
@media screen and (max-width: 500px) {
.column {
width: 100%
}
}