CODEWITHSUNDEEP
css
palo
palo

Reputation: 169

Align text in center in css in mobile using media screen

i am trying to center align the text on mobile but it's not working. enter image description here here is the code

@media screen and (max-width: 100px) {
  .info1{
    
    width: 100px;
  height: 100px;
  margin: 0 auto;
   
  }
}  
 <div class="info1">
      <p style=" display:inline-block; "> Contact : +97252387
 ,  </p>             
   <p style=" display:inline-block; ">Dizengoff square 85 Tel Aviv</p>
  </div>

text-align is also no working

Upvotes: 1

Views: 971

Answers (1)

Berci
Berci

Reputation: 3386

Your centering is not working because your media query is 

@media screen and (max-width: 100px) {...

so it is probably working under 100px. But I am guessing you meant 1000px?

EDIT: here are 2 working examples:

@media screen and (max-width: 1000px) {
  .info1{
    
    width: 100px;
  height: 100px;
  margin: 0 auto;
   
  }
}
<div class="info1">
      <p style=" display:inline-block; "> Contact : +97252387
 ,  </p>             
   <p style=" display:inline-block; ">Dizengoff square 85 Tel Aviv</p>
  </div>

@media screen and (max-width: 1000px) {
  .info1 {
  display:flex;
  flex-direction: column;
  align-items: center;
   
  }
  .info1 > p {
    width: 100px;
  }
}
<div class="info1">
      <p style=" display:inline-block; "> Contact : +97252387
 ,  </p>             
   <p style=" display:inline-block; ">Dizengoff square 85 Tel Aviv</p>
  </div>

for the last example please note you can remove

.info1 > p {
    width: 100px;
}

if you don't want fixed width.

Upvotes: 1

Related Questions