CODEWITHSUNDEEP
htmlcssalignmentresponsive
toni
toni

Reputation: 152

Align text centered only on mobile

I want the text to align centered on mobile only. On desktop the text should align right.

@media only screen and (min-device-width: 320px) and (max-device-width: 800px) {
  .centerMobileOnly {
    text-align: center !important;
  }
}

@media only screen and (min-device-width: 600px) {
  .rightDesktopOnly {
    text-align: right !important;
  }
}
<div>
  <h3 class="rightDesktopOnly centerMobileOnly">02:00</h3>
</div>

Upvotes: 2

Views: 2103

Answers (1)

KuldipKoradia
KuldipKoradia

Reputation: 3031

you dont have to add two class for media css you can go through single only.

.centerMobileOnly{
  text-align: right;
}
@media (max-device-width: 800px) {
  .centerMobileOnly {
    text-align: center;
  }
}
<div>
  <h3 class="centerMobileOnly">02:00</h3>
</div>

Upvotes: 2

Related Questions