htmlcssmpmediaquery

Html, Css Media Query does not work, im a Beginner

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

.doi_tuong{
  align-items: center;
  border-radius: 5px;
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;
  display: flex;
  height: 200px;
  justify-content: center;
  margin-right: 4rem;
  width: 380px;
        transition: all 0.3s ease;

}

.doi_tuong:hover {
    transition: all 0.3s ease;
    transform: scale(1.05, 1.05);
}
<div class="doi_tuong"
<p><font color="white" style="font-size:25px">   PODCAST LAUNCH </font></p>
</body>
    
    </div>

Please someone with know how look over my html & css code and help me that the View is Displayed appropriately on all Devices. Im a complete Beginner and use Codes which i copy pasted from Codepen and put them together. It works but in Tablet or Handphone view it will not fit anymore, i tried Media Query but it doesn´t works or i make mistakes.

Thank you very much in advanced.

Solution

  • Set width and height to auto and then add some padding. Now it will work on all viewports, on small screens the text may wrap onto a new line but it will still look fine

    body {
  align-items: center;
  background-color: black;
  display: flex;
  height: 100vh;
  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: auto;
  justify-content: center;
  margin-right: 4rem;
  padding: 2rem;
  text-align: center;
  width: auto;
  transition: all 0.3s ease;

}

.doi_tuong:hover {
  transition: all 0.3s ease;
  transform: scale(1.05, 1.05);
}
    <div class="doi_tuong"
<p><font color="white" style="font-size:25px">   PODCAST LAUNCH </font></p>
</body>
    
    </div>