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

Question

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

63 views Asked by AudioBubble At 02 June 2022 at 12:48

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 class="doi_tuong"
             <p><font color="white" style="font-size:25px">   Lorem et ipsum Lorem et ipsum</font></p>
         </body>
    </div>
</div>

Original Q&A

There are 3 answers

Kameron On 02 June 2022 at 13:01

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 class="doi_tuong">
  <p style="font-size:25px; color: white;"> Lorem et ipsum Lorem et ipsum</p>
</div>

AudioBubble On 03 June 2022 at 08:19

Problem solved.

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);
}

**Robin Hood** · Accepted Answer · 2022-06-02T12:59:17+00:00

Robin Hood On 02 June 2022 at 12:59 BEST ANSWER

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

TechQA.

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

There are 3 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in MPMEDIAQUERY

Popular Questions

Popular Tags

Trending Questions