How do I construct a {display:none} media query -just for the min-height declaration (see below), and not pertaining to #right-column, since I want to keep the padding/color?
If I make a class for min-height alone, it doesn’t work because #right-column is a fluid span (bootstrap) and doesn’t accept the additional class on that div.
#right-column {
padding-top: 20px;
background-color: #008080;
min-height: 525px;
}
Thank you
Hi,
You’ve worded the question rather awkwardly I’m afraid so I’m not quite sure what you are trying to do.
How do I construct a {display:none} media query -just for the min-height declaration (see below)
Those are two different things that have nothing in common with each other. If you meant you wanted to cancel out the min-height then as you suggest you could create a new class.
e.g.
.no-min {min-height:0!important}
You would then need to add that class to the elements that you require. You can add as many classes as you like to bootstrap elements. There is no reason why you can’t add another class.
If you want that rule to be active only at certain widths then stick it inside the appropriate media query. Remember though that the elements must have that new class applied by default or nothing will happen.
However, I’m not sure if any of that is what you really wanted
I’m familiar doing with using media queries, and I suppose your suggestion is a roundabout way of doing that, but I don’t want to set it to 0, I want it to display:none.
<style>
.height { min-height: 525px;}
</style>
@media (max-width: 768px) {
.height {
display: none;
}
}
However I have found in bootstrap responsive sites, the row-fluid and column span classes don’t easily accept two classes. Try it and you’ll see, I swear to it.
That makes no sense you are mixing different things I’m afraid.
Your display:none will simply remove the whole element and not just a value from that element. It does not refer to the height or min-height as such and doesn’t actually make sense if it did. Its chalk and cheese
However if all you want is to set the element to display:none then that’s fine.
However I have found in bootstrap responsive sites, the row-fluid and column span classes don’t easily accept two classes. Try it and you’ll see, I swear to it.
I’ve just finished coding 100 bootstrap pages for a client and there is no problem with over-riding any of the bootstrap classes as long as you add sufficient weight. A simple selector may not always over-ride the classes because the span classes are qualified with attribute selectors and carry more weight than a single simple selector.
Just add more weight to your rule and it will win out (which is why I added !important above just to be sure but normally you don’t need to be that harsh). However be careful what you over-ride because the structure should not be changed as it all ties in together in bootstrap.
Just follow the normal specificity rules and the styles you apply will win out over anything else.
I echo Paul’s sentiment that the goal is not clearly worded. If what you want to do is simply nullify ( have NO MIN-HEIGHT) applied then it’s the DECLARATION hat you want to use is: min-height:auto;
if what you want to do is have the element not display (display:none; )
if you want to hide the element , then display:none; should do the trick… keeping in mind that min-height becomes irrelevant; since the element is not being displayed there in min-height , or any height for that matter.
Also consider specificity (I noticed you are using an ID) if you had set the display:whatever rule whit an ID your selector will need AT LEAST ONE ID to override it for your media query ( so it’s not that bootstrap doesnt handle multiple classes).
IF what you want is the media query to act based UPON THE ELEMENT’S MIN-HEIGHT ( or any other property of the element ) am afraid that doesnt quiet work that way*. Media queries respond to media and viewport attributes.
*if you have certain conditions and are adroit with math you could achieve the effect tho in some cases it’s not practical . Height begin one of those impractical conditions, lemme make the following proof of concept demo based on width:
body,html{margin: 0; padding: 0; }
.hideMe {float:right; width:50%}
.on{ background: pink; overflow: hidden; }
@media (max-width:500px) {
.hideMe {display:none;}
}
<div class="hideMe"> I am the element to hide</div>
<div class="on"> I am always on</div>
.hideMe will have a min-width of 250px(I may be off by a px but you get the idea, 50% of at least 500px) OR be hidden. nothing precludes you from having only ONE declaration in a media query, other than it’s bound to get tiresome after a bit. Again you really aren’t targeting min-width, but the calculated equivalent value based on a relationship of the element relative to the viewport.
hope that helps
You mean min-height:0 Ray as ‘auto’ is not a value for min-height (although strangely if you validate under css3 it doesn’t flag an error even though its not in the css3 spec either).
This won’t work:
div{
min-height:500px;
min-height:auto;
background:red
}
Auto is ignored as its not a value for min-height so the height stays at 500px
Useful comments, I’m sure I have the info now to work it out.