0

I want to use "The Perfect 3 Column Liquid Layout (Percentage widths)" from this website: https://matthewjamestaylor.com/blog/perfect-3-column.htm , and make it mobile responsive, but so far I have been unable to do it.

I have added the following code to my .css file, and it does not work.

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

These are the relevant parts of my .css. file.

/* 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%;           

}
Mateo Calafat
  • 1
  • 1
  • Hello Mateo, I'm sorry but your question is too broad. What do you mean by responsive (somethiong off-screen, none floated, etc...)? What is not working ? What is the html structure of your page ? – Amaury Hanser Apr 17 '19 at 14:43
  • Hi, what I want is that the three columns are reorganized vertically on top of each other when looking at the page from a small mobile phone screen. From a desktop, they of course appear horizontally side by side occupying the whole screen. That is why I tried to use this code: @media only screen and (max-width: 629px) { .colmask, .colmid, .colleft { float: none ; width: 100% ; } } but it did not work. So I guess I got the code wrong or used the wrong parameters. – Mateo Calafat Apr 17 '19 at 15:23
  • Here is the HTML structure of my page: [code]
    Center
    Left
    Right
    – Mateo Calafat Apr 17 '19 at 15:32
  • Wow, I've just read the whole code. Do you need to be able to support IE 5 ? Because that's and old way to solve this layout. The site your refer to is 10 years old. It would be way more simple with more modern technics. – Amaury Hanser Apr 17 '19 at 15:45
  • IE 5? No, I don't think so. Does anybody still use IE 5 anyway? I thought that by adding the correct "media only screen and (max-width: 629px)..." code to the .css file it would work, but if you tell me there are more modern technics then... – Mateo Calafat Apr 17 '19 at 15:52
  • You've got some `right: xx` and `left: xx`. I wouldn't say that it's a mess, but it won't do any good to you. I would search for **holy grail flexbox** if I were you. – Amaury Hanser Apr 18 '19 at 06:36

0 Answers0