SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2013
    Location
    RI, USA
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    media query conundrum

    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.

    Code:
    #right-column {
    	padding-top: 20px;
    	background-color: #008080;
            min-height: 525px;
    }
    Thank you

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    .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

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2013
    Location
    RI, USA
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by NoVex View Post
    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.

    Code:
    <style>
    .height { min-height: 525px;}
    </style>
    
    @media (max-width: 768px) {
    	.height {
    	display: none;
    	} 
    }
    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.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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:
    Code:
    		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

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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;
    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:
    Code:
    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

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2013
    Location
    RI, USA
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Useful comments, I'm sure I have the info now to work it out.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •