Search code examples
cssmedia-queries

Min-height auto ignored in iOS mobile

I have some list items set to min-height: 12em - for desktop

When sizing down for tablet / mobile screens I want to reset this to: min-height: auto

However iPad / iPhone is ignoring this and maintains the 12em

I've also set height: auto

Solution

  • Use the following code:

    /* Desktop */
.listings.default li {
    min-height: 12em;
} 

/* Between Desktop and Tablet */ 
@media only screen and (max-width: 1200px) and (min-width: 768px) { 
    .listings.default li {
        display: list-item;
        min-height: inherit;
    }
}

    So use inherit instead of auto

    I tested this on my iPhone but with another media query.. Check this post to see some of the media queries for standard devices..