Text overlays the box in mobile view, how can i implement Media Query in my Code?-CodePudding

I tried different Ways to implement Media Query or other Options to to adjust the Size of the Font to fit the View to different Devices but I'm an absolute Beginner who threw together a few Codesnippets. Please help me to adjust the Code so that it works.

body {
  align-items: center;
  background-color: black;
  display: flex;
  height: 00vh;
  justify-content: center;
   margin: 0;
}

.doi_tuong{
  align-items: center;
  border-radius: 25px;
  background: #121212;
  box-shadow: 12px 12px 16px 0 rgba(255, 255, 255, 0.3) inset, -10px -10px 20px 0 rgba(255, 255, 255, 0.3) inset, -8px -8px 12px 0 rgba(255, 255, 255, 0.3) inset;
  cursor: pointer;
  display: flex;
  height: 70px;
  justify-content: center;
  margin-right: 0rem;
  padding: 3rem;
  text-align: center;
  width: auto;
  transition: all 0.3s ease;
}


.doi_tuong:hover {
    transition: all 0.3s ease;
    transform: scale(1.05, 1.05);
}

.text-doi_ {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

<div 
             <p><font color="white" style="font-size:25px">   Lorem et ipsum Lorem et ipsum</font></p>
         </body>
    </div>
</div>

CodePudding user response：

The issue in why it's not working on desktop or mobile is because you had invalid markup and you have height: 00vh; on your body element. Remove that and it should be good. I also added an example media query in your CSS.

body {
  align-items: center;
  background-color: black;
  display: flex;
  justify-content: center;
  margin: 0;
}

.doi_tuong {
  align-items: center;
  border-radius: 25px;
  background: #121212;
  box-shadow: 12px 12px 16px 0 rgba(255, 255, 255, 0.3) inset, -10px -10px 20px 0 rgba(255, 255, 255, 0.3) inset, -8px -8px 12px 0 rgba(255, 255, 255, 0.3) inset;
  cursor: pointer;
  display: flex;
  height: 70px;
  justify-content: center;
  margin-right: 0rem;
  padding: 3rem;
  text-align: center;
  width: auto;
  transition: all 0.3s ease;
}

.doi_tuong:hover {
  transition: all 0.3s ease;
  transform: scale(1.05, 1.05);
}

.text-doi_ {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* added */

@media only screen and (max-width: 800px) {
  .doi_tuong {
    margin-top: 3rem;
  }
}

<div >
  <p style="font-size:25px; color: white;"> Lorem et ipsum Lorem et ipsum</p>
</div>

CodePudding user response：

Remove height: 00vh; from <body> tag to fix your issue. Replace the below code with yours.

body {
  align-items: center;
  background-color: black;
  display: flex;
  justify-content: center;
  margin: 0;
}

CodePudding user response：

body{
   height: 100vh;
}

Try This