Всем привет дорогие друзья. Возникла проблема, а именно нехватка знаний в css, в итоге ни как не могу правильно адаптировать кнопку. Получается вот так.
А хотелось, чтобы текст не вылизал за пределы самой кнопки. Как только не пытался, ну ни как не могу правильно адаптировать.
Вот сам css код кнопки с адаптацией.
Код
.download-disc { height:63px; font-size: 19pt; text-transform: uppercase; font-weight: bold; float: left; margin-left: 3px; }
.download-disc:hover { background-color: #842d2d; -moz-transition: background-color 0.8s 0.1s ease;-o-transition: background-color 0.8s 0.1s ease;-webkit-transition: background-color 0.8s 0.1s ease;cursor: pointer; border-radius: 10px}
.download-block a:hover{ text-shadow:none; }
.download-disc div{ background:url(http://zornet.ru/Fresa/AB/fega/disc.png) no-repeat; padding-left: 53px; margin-left: 6px; height: 50px; line-height: 2; opacity: 0.8; color: #cfcfcf; margin-top: 6px; margin-right:6px; }
.download-disc div:hover{ opacity: 1;}
.download-size { float: left; text-align: center; padding-top: 12px; margin:3px 10px; font-size: 13px; }
@media only screen
and (max-width : 1024px) {
.download-disc div{background: none;}
}
@media only screen
and (max-width : 780px) {
.download-size {display: none!important;}
.download-block {max-width: 408px;}
}
@media only screen
and (max-width : 480px) {
.download-block {min-width:470px;height:72px;max-width: 224px;}
.download-disc div {padding-left: 0px; margin-left: 0px; height: 0px;}
.download-disc { height:63px; font-size: 14pt; text-transform: uppercase; font-weight: bold; }
}
Ссылка