Responsive Text HTML/CSS

Question

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/aos@2.3.1/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/aos@2.3.1/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)

Does this answer your question? [Media Queries: How to target desktop, tablet, and mobile?](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) — disinfor, Nov 18 '21 at 20:15
Welcome to Stack Overflow! You want `media queries`. Search Google and you'll get lots of tutorials. Good luck! — disinfor, Nov 18 '21 at 20:15
Welcome to Stack Overflow! Absolute positioning is a **very** poor method of laying out webpages. It is extremely inflexible and there are much better and more responsive options. Check out [**LearnLayout.com**](http://learnlayout.com/) — Paulie_D, Nov 18 '21 at 20:25

score 0 · Answer 1 · answered Nov 18 '21 at 20:26

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%
}
    }

score 0 · Accepted Answer · answered Nov 18 '21 at 20:28

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/aos@2.3.1/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/aos@2.3.1/dist/aos.js"></script>
<script>
  AOS.init();
</script>

Thanks, it works. Now I try hard to understand how you did it, at least for the next time I will not have problems — Jis, Nov 18 '21 at 20:32
@Jis you can mark this as the answer, To explain better I wrapped the entire elements inside the body in a div with a class container, made it position absolute and gave it padding. Then the child elements I removed the positions you have attached to them. — Kingsley Uchenna, Nov 18 '21 at 21:03
yup, sorry but I forgot to mark it as the right answer. However, I saw how you did it, and I quite understand. In fact, I also had to add an image, and following your explanation it resizes itself according to the viewport (and through a @media at some point it disappears, because otherwise it overlapped the text or became too small). In that I didn't create a div, but I directly modified the "img.man_run" on the css (in this case I called it the image class). Thanks again for your help! :D — Jis, Nov 18 '21 at 21:53
No problem. Overlapping text you can use {break-word: break-all;} to force it enter the next line. It's cool. — Kingsley Uchenna, Nov 18 '21 at 21:56

Responsive Text HTML/CSS

2 Answers2