Перейти к содержанию
Ch0oJoy

Посоветуйте решение по Tab'ам на мобильном

Рекомендуемые сообщения

Здравствуйте! Подскажите как настроить табы на мобильном, перепробовал много вариантов, моих знаний уже не хватает.

1211222222.png.0f0cf10fda1e7d8e8a51b7212661bd20.png

 

Код табов:

.htabs{height:34px;}
.htabs a{border-bottom: 2px solid #d22828;
    border-radius: 0 5px 0 0;
    color: #888;
    display: none;
    font-size: 16px;
    font-weight: 500;
    line-height: 1em;
    margin-right: 8px;
padding: 9px 10px 10px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;}
	.htabs a:hover{color: #444;}
.htabs a:after{content:'';position:absolute;z-index:1;top:0;right:-5px;bottom:0;width:10px;-webkit-transform:skew(20deg);-moz-transform:skew(20deg);-ms-transform:skew(20deg);-o-transform:skew(20deg);transform:skew(20deg);}
.htabs a.selected{background:#fff;z-index:2;}
.htabs a.selected:after{z-index:10;background:#fff;border-bottom:none;}

@media (max-width:767px){
    .htabs > li {margin:0;}
    .htabs li a{margin:0 10px 10px 0;padding:9px 10px 10px 15px;border:solid 1px #ddd !important;border-radius:4px;}
    .htabs li a i {margin:0 10px 0 0}
    .htabs li:after{display:none}
}

.tab-content{margin:15px 2px 25px;}

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Ссылку дайте на сайт, что нам ваш код...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
28 минут назад, buslikdrev сказал:

Ссылку дайте на сайт, что нам ваш код...

del

Вот ссылка

Изменено пользователем Ch0oJoy

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Что нам ваша ссылка, там и так все ясно.

.htabs a - уменьшить для мобильных padding по бокам и размер шрифта

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
@media (max-width: 560px){
.htabs a {width: 100%;display: inline-block!important;}
.htabs {height:auto;}
}

 

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Мой вариант:

Скрытый текст

 


Для других:

.htabs a{border-bottom: 2px solid #d22828;
    border-radius: 0 5px 0 0;
    color: #888;
    display: inline;
    font-size: 16px;
    font-weight: 500;
    line-height: 1em;
    margin-right: 8px;
padding: 9px 10px 10px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;}

Для мобилы:
@media (max-width: 768px) {

.htabs {

height: 150px;

}

.htabs a {

display: block;

}


}


И style="display: inline;" с кнопок (вкладок) удалить

 

Изменено пользователем buslikdrev
  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо большое! Не было ни одного варианта, теперь 2 разных :eek:

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.