Как сделать этот дизайн 3 колонки отзывчивым? - PullRequest
Новая
       37

Как сделать этот дизайн 3 колонки отзывчивым?

0 голосов
/ 17 апреля 2019

Я хочу использовать «Идеальную жидкостную разметку с 3 колонками (в процентах ширины)» с этого веб-сайта: https://matthewjamestaylor.com/blog/perfect-3-column.htm и сделать ее адаптивной для мобильных устройств, но до сих пор я не смог этого сделать.

Я добавил следующий код в мой файл .css, и он не работает. 

@media only screen and (max-width: 629px) { 
    .colmask, 
    .colmid, 
    .colleft {
        float: none ;
        width: 100% ;
    }
}

Это соответствующие части моего .css. файл. 

/* column container */

.colmask {
    position:relative;
    clear:both;
    float:left;
    width:100%;         
    overflow:hidden;
}

/* common column settings */

.colright,
.colmid,
.colleft {
    float:left;
    width:100%;         
    position:relative;
}

.col1,
.col2,
.col3 {
    float:left;
    position:relative;
    padding:0 0 1em 0;      

    overflow:hidden;
}

/* 3 Column settings */

.threecol {
    background:#cedcec;     
}

.threecol .colmid {
    right:20%;          
    background:#eaedf4;     
}

.threecol .colleft {
    right:60%;          
    background:#cedcec;     
}

.threecol .col1 {
    width:60%;          
    left:100%;          
}

.threecol .col2 {
    width:20%;          
    left:20%;           
}

.threecol .col3 {
    width:20%;          
    left:80%;           

}
...