/* Betöri egymás alá a tabokat, nagyon sok tab esetében már nem a legjobb megoldás*/
@media all and (max-width:500px){
    .outer-frame .frame-selector-list {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
    }
    
    .outer-frame .frame-selector-list li {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 50%;
            -ms-flex: 1 1 50%;
                flex: 1 1 50%;
    }

    .outer-frame .frame-selector-list li a {
        height: auto;
        font-size: 12px;
    }
}

/** Ebben az esetben a tabok scrollozhatóak lesznek, és bármennyi lehet egymás mellet
 *  A flex a legtöbb modern böngészőben támogatott, mobilon, ez 
 */
@media all and (max-width:500px){
    .outer-frame .frame-selector-list {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    
    .outer-frame .frame-selector-list li {
        width: 50%; /* Itt lehet látszani a szélességgel, hogy mondjuk 2.5 látszódjon, abból látja a user, hogy van még tovább, vagy egy dummy nyilat is lehet oda tenni */
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        float: left;
    }

    .outer-frame .frame-selector-list li a {
        height: auto;
        font-size: 12px; /* A 12px a legtöbb esetre jó lesz és még olvasható */
    }
}