CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Code
Code

Reputation: 2129

CSS code inside my media query is ignored

I am trying to pad a <p> left only at a certain screen size. I have the following CSS and HTML:

float-left-icon {
    padding-left: inherit;		
}

@media only screen and ( max-width : 991px) {
    float-left-icon{
        padding-left: 30px;			
    }
}
<p class="float-left-icon" style="padding-bottom: 15px;">
    <i class="glyphicon glyphicon-folder-open"></i>
    <a href="http://www.google.com" data-toggle="tooltip" data-placement="top" >Test</a>
</p>

My problem is that the float-left-icon class isn't even showing up in the developer tools when I debug it in the browser... So it isn't even firing.

Can someone please advice what I am doing wrong?

Upvotes: 0

Views: 72

Answers (5)

John Slegers
John Slegers

Reputation: 47081

Correct code :

You need to add a . character in front of your CSS selectors :

.float-left-icon {
    padding-left: inherit;		
}

@media only screen and ( max-width : 991px) {
    .float-left-icon{
        padding-left: 30px;			
    }
}
<p class="float-left-icon" style="padding-bottom: 15px;">
    <i class="glyphicon glyphicon-folder-open"></i>
    <a href="http://www.google.com" data-toggle="tooltip" data-placement="top" >Test</a>
</p>

Explanation :

In CSS, class names start with a ., id names start with a # and tag names start don't need a special character in front.

Take the following example :

.span {
   color : red;
}
#span {
   color : green;
}
span {
   color : blue;
}
<p class="span">Meep meep</p>
<p id="span">Meep meep</p>
<span>Vrooooom</span>

See the W3Schools documentation for more details on how to use CSS selectors.

Upvotes: 0

trashr0x
trashr0x

Reputation: 6565

Classes need to be preceeded by a ., IDs by # and so on. So change your rules to:

.float-left-icon{
    padding-left: inherit;      
}

@media only screen and (max-width : 991px)
{
    .float-left-icon {
        padding-left: 30px;         
    }
}

If you'll only be using this rule to pad <p>'s you can make it more specific by changing your rule to p.float-left-icon.

Upvotes: 1

Ciprian
Ciprian

Reputation: 882

I think you forgot a dot (.) character:

.float-left-icon {
    padding-left: inherit;
}
@media only screen and (max-width: 991px) {
    .float-left-icon {
        padding-left: 30px;         
    }
}

Upvotes: 1

freefaller
freefaller

Reputation: 19953

You need to use . to denote a class in CSS.

Change float-left-icon in your CSS to .float-left-icon

Upvotes: 2

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Because CSS for float-left-icon isn't referring class. It should be preceeded with .

.float-left-icon{
        padding-left: inherit;      
 }
 @media only screen and ( max-width : 991px)
 {
     .float-left-icon{
            padding-left: 30px;         
     }
 }

Upvotes: 0

Related Questions