Max-height in Fluid Grid

i have created .css transition expand/collapse on hover div in cs6.  have set max-height div in desktop view, however, wish set different max-heights tablet , mobile layouts since desktop max-height big conceal info in layouts.

 

here current .css code:

 

#whf-content {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    color: #fff;
    background-attachment: fixed;
    background-repeat: repeat;
    background-color: #000;
    max-height: 278px;
    overflow: hidden;
}
#whf-content {
    clear: both;
    float: left;
    margin-left: 0;
    width: 66.6666%;
    display: block;
    max-height: 190px;
}
#whf-content {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.6007%;
    display: block;
    -webkit-transition: .75s ease 0s;
    -moz-transition: .75s ease 0s;
    -ms-transition: .75s ease 0s;
    -o-transition: .75s ease 0s;
    transition: .75s ease 0s;
}
#whf-content:hover {
    max-height: 999px;
}

 

as can see, i've attempted make 2 different max-height values 278px , 190px above when that, 190px affects desktop view overriding 278px value.

 

my question is, how can set different max-heights same div while affecting each individual fluid grid view?  appreciated.

use css media queries in content style sheet.

 

/* special rules mobiles. */

@media screen , (max-width: 480px) {

    #whf-content { max-height: 190px}

}

 

/* special rules tablets. */

@media screen , (min-width: 481px) {

    #whf-content { max-height: 225px}

}

 

/* special rules desktops. */

@media screen , (min-width: 1025px) {

    #whf-content { max-height: 280px}

}

 

 

nancy o.

More discussions in Dreamweaver support forum

adobe