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

[Ch0oJoy]

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

 

Код табов:

.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;}

 

[Ch0oJoy]

28 минут назад, buslikdrev сказал:

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

del

Вот ссылка

Змінено 10 липня 2017 користувачем Ch0oJoy

[pantagruel964]

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

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

[mazein]

@media (max-width: 560px){
.htabs a {width: 100%;display: inline-block!important;}
.htabs {height:auto;}
}

 

[Ch0oJoy]

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