Выровнять кнопки или адаптировать их для мобильной версии сайта

@agr · Регистрация: 08.11.2015

Author24 — интернет-сервис помощи студентам

Добрый день! Помогите пожалуйста разобраться.

PHP

<section class="contents_widther">
<div class="feedbacks group">
    <ul>
        <li>
        <a id="TestDrive" >Записаться<br>на тест-драйв</a> </li>
        <li>
        <a id="GetPhoneCall" >Заказать<br>звонок</a> </li>
        <li>
        <a id="CreditOrder" >Заявка<br>на кредит</a> </li>
        <li>
        <a id="AskQuestion" >Задать<br>вопрос</a> </li>
    </ul>
</div>

Стили:

CSS

.contents_widther {
    width: 88%;
    padding: 0 5%;
    margin: 0 auto;
}
.feedbacks {
    padding-top: 40px;
    height: 120px;
}
.feedbacks ul, .feedbacks-on-car ul {
    text-transform: uppercase;
    font-family: 'Datsun';
    font-size: 16px;
    width: 100%;
}
.feedbacks li {
    width: 24%;
    margin-right: 1%;
    text-align: center;
    float: left;
}

Проблема в том, что с мобильного устройства кнопки отображаются некорректно:

Выровнять кнопки или адаптировать их для мобильной версии сайта

@Kenny7423 · 08.11.2015, 17:13

в стилях прописать примерно такой код:

CSS

@media only screen and (min-width:240px) and (max-width:480px){
.feedbacks li {
    width: 100%;
    text-align: center;
    float: none;
     margin-bottom:10px;
}
}

и в теге head прописать:

HTML5

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

@Almag13 · 08.11.2015, 20:27

Дело в том, что у мобильных устройств разрешение экрана меньше, поэтому либо разрабатывается дизайн для них, либо в данном варианте, как написал Kenny7423 - сделать их во всю ширину.
Или если хотите реализовать так как у вас уменьшить шрифт

CSS

@media only screen and (min-width:240px) and (max-width:480px){
.feedbacks li {
    text-align: center;
    font-size: 10px; // выше или ниже 
    margin-bottom:10px;
}
}

	08.11.2015, 20:27

Опции темы

Выровнять кнопки или адаптировать их для мобильной версии сайта

Решение