css - how to determine why a particular css rule is being overwritten


Tags: css,twitter-bootstrap,responsive-design

Problem :

I'm trying to troubleshoot a css problem (using bootstrap.css btw). I've created my own custom css file so that I can add to / or in some cases, replace the bootstrap rule.

I've been using the "Inspect" tool in firefox - under the Web Developer options. I can see that the style I think should be applied to my page has been crossed out. I just read in another post here on stackoverflow that that means the style has been overwritten. But i don't understand why this is being overwritten or how to further troubleshoot this issue.

The css rule itself is a media query - I'm trying to check for the size of the browser, and then depending on how big it is, change an image. How am i changing my browser size? I'm using Firefox's responsive design view tool instead of doing it manually.

Here's the rule that is being overwritten:

@media (max-width: 360px) {
.hero-unit h1 {
  margin-bottom: 0;
  font-size: 0.2em;
  line-height: 1em;
  letter-spacing: -5px;
  color: inherit;
}
.hero-unit p {
  font-size: 0.2em;
  font-weight: 50;
  line-height: 1em;
  color: inherit;
}   
.hero-unit {
  background: url("../img/1.jpg");
  padding: 1em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}   
}

This is the one that is being applied:

@media (max-width: 979px){
.hero-unit h1 {
  margin-bottom: 0;
  font-size: 2.0em;
  line-height: 1.5;
  letter-spacing: -1px;
  color: inherit;
}
.hero-unit p {
  font-size: 1.2em;
  font-weight: 20;
  line-height: 1.5em;
  color: inherit;
}   
.btn-large {
  padding: 6px 10px;
  font-size: 11px;
  line-height: normal;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}   
.hero-unit {
  padding: 1em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}
h2 {
  font-size: 1.5em;
  line-height: 2em;
}   

 }

Can you tell me where I've gone wrong? Thanks.

EDIT 1:

Here's the actual html where this css is supposed to be applied to:

  <div class="container"> 
    <div class="span8">
          <div class="hero-unit">
            <h1>&nbsp;</h1>
            <h1>&nbsp;</h1>
            <h1>&nbsp;</h1>
            <h1>&nbsp;</h1>
            <h1>&nbsp;</h1>
          </div>

           <div class="row-fluid">
                <div class="span4">
                    <h2>list 1 </h2>
                    <p>list</p>
                    <p><a class="btn" href="<?php echo base_url();?>index.php/list1/"><i class="icon-list-alt"></i> View details &raquo;</a></p>
               </div><!--/span-->

                <div class="span4">
                    <h2>list2</h2>
                    <p>some other list</p>
                    <p><a class="btn" href="<?php echo base_url();?>index.php/list2/"><i class="icon-globe"></i> View details &raquo;</a></p>
               </div><!--/span-->


                <div class="span4">
                    <h2>routes</h2>
                    <p>list of all routes</p>
                    <p><a class="btn" href="<?php echo base_url();?>index.php/routes/"><i class="icon-globe"></i> View details &raquo;</a></p>
                </div><!--/span-->          
            </div>      
        </div>

It's the hero-unit that has a background image defined in the css. I'm not sure if this is the best way to do this or not, but for the most part, it seems to be working. Thank you.



Solution :

If the width of the browser is 360px and the max-width: 979px is below the max-width: 360px in your CSS it will take precedence since both apply to a browserwidth of 360px.

Either move the max-width: 360px below or set a @media (max-width: 979px) and (min-width: 361px).

Also, this is a good read on precedence in CSS, http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/


    CSS Howto..

    How do you create a transparent overlay with text upon mouse hover?

    How do i create a gem which will generate a css file from a template

    CSS - How to show only a % of the top div with two identicals divs stacked over each other

    css button with arrow… how to move arrow

    why is the space (shown in image) is added below when using vertical-align? How to fix it?

    Preventing jquery's show/hide from adding inline style?

    How to specify font-size for all bold text in the div?

    How to vertically center an HR element

    how can I make my navbar scroll smoothly to the top on page click

    How to Fade in AFTER the Page has Loaded: Javascript

    How do I center this form-button block?

    How to set height of child div while hovering over a parent div in css?

    How to change html background dynamically

    How do you associate a css/sass stylesheet to a view in rails?

    How to position contents according to zoom level?

    How to add multiple css rules to minimize browser reflows?

    How to highlight an image after selection using css or jquery? [closed]

    How to show the scaled image and text in the view port without scrollbar?

    How can i make div shape like this with css? [duplicate]

    How to cut off text that is longer than the space available and show '…'?

    How to group CSS colors

    Why does my progress bar shows full progress value before it start loading

    How to prevent Twitter Bootstrap changing margins as width of page is extended

    How to use a custom Style Sheet in WordPress

    How to change Image inside of CSS of a usercontrol

    How can I get IE7 to see an HTC file in the same directory as my CSS?

    How to emulate window title bar in CSS/HTML

    How to hide and show div with button? How to add effect to the button when show the div?

    How To Display only First Word of H2 Heading With JavaScript or CSS

    How to setup a ASP template