Как адаптировать div блок под мобильную версию?

Question

[artik20101]

Здравствуйте, есть блок div, вот его стили:

.enjoy-css {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 900px;
  padding: 20px;
  overflow: hidden;
  border: none;
  font: normal normal bold 20px/1 Arial Black, Gadget, sans-serif;
  color: rgba(10,0,0,1);
  text-align: center;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  background: #8d02d8;
  -webkit-box-shadow: 4px 6px 5px 0 rgba(34,20,232,0.3) ;
  box-shadow: 4px 6px 5px 0 rgba(34,20,232,0.3) ;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
}

На комп версии сайта он отображается нормально, но как адаптировать его под мобильные устройства? там он выглядит ужасно.

Comments

[Дмитрий]

вместо width: 900px - max-width: 900px;

[artik20101]

Дмитрий, Спасибо)

Answer 1

[Alexey Moloko]

Медиа-запросы вам в помощь.
htmlbook.ru/css/value/media