Menu
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
584
Defines the min-height as an absolute value. <percentage> Defines the min-height as a percentage of the containing block's height. auto. The browser will calculate and select a min-height for the specified element.
Conversation. CSS tip: To reset a min-height or min-width declaration, set it to "0", not "auto". For max-height/width, the initial value is "none".
The min-height property in CSS is used to set the minimum height of a specified element. The min-height property always overrides both height and max-height . Authors may use any of the length values as long as they are a positive value.
The max-content height is, roughly, the height the content would have if no “soft” line breaks were inserted, i.e., if each paragraph is one long line. The intrinsic minimum height. The min-content height is, roughly, the tallest the box can get by breaking all lines at all possible break points.
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..
92
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
