CODEWITHSUNDEEP
htmlcss
mayconbelfort
mayconbelfort

Reputation: 305

Removing a parent style on CSS hierarchy

I'm trying to override a css class to improve the site when looking in a small screen. Here is the e.g.

My file:

@media only screen and (max-width: 480px)
body.layout-mode-responsive .fp-roksprocket-showcase.rt-block {
margin: 0;
}

Core file:

.fp-roksprocket-showcase.rt-block {
margin: 0;
padding: 100px 0 80px 0;
}

This way, the DIV that I wanna override, is getting the padding of the Core file... To be the way that I want, I couldn't put the padding style on my file. I need to "remove" this style!

How can I make this?

Upvotes: 0

Views: 1336

Answers (5)

ADTC
ADTC

Reputation: 10131

You are looking for the initial keyword. Please check MDN documentation.

The initial keyword resets the inherited style to the default style according to CSS specifications. However, this is supported since CSS3 only and it looks like you need to add workarounds for Internet Explorer.

The similar unset keyword is even worse in terms of browser compatibility but maybe better suited to what you want.

You may also want to check this question for related information.

Note: Most of the answers here think the asker wants to remove the padding. What the asker wants to do is remove the parent style (restoring the padding to what the browser would have put if the style wasn't mentioned in the first place).

Upvotes: 1

T.Schinler
T.Schinler

Reputation: 25

It appears you are missing the curly brackets from your media query.

You have:

@media only screen and (max-width: 480px)
body.layout-mode-responsive .fp-roksprocket-showcase.rt-block {
margin: 0;
}

what you should have is:

@media only screen and (max-width: 480px){
   body.layout-mode-responsive .fp-roksprocket-showcase.rt-block {
     margin: 0;
     padding: 0;
   }
}

I hope that helps.

Upvotes: 0

Ekansh Rastogi
Ekansh Rastogi

Reputation: 2546

How css styling occurs is all the parent styling is automatically inherited by all the children elements and if you want to override any of the parent style you then have to specify it in the child element css style.

Suppose we have 

.parent{color:red;}

then all the child elements will have the css style color: red . If you want to override it in child elements then you have to specify in child element css style color:black

Now in your case, your parent styling have padding: 100px 0 80px 0; if you do not want it in child then just do padding: 0px;

So it should look like this

@media only screen and (max-width: 480px){
   body.layout-mode-responsive .fp-roksprocket-showcase.rt-block {
     margin: 0;padding :0;
   }
}

Upvotes: 0

James Martin-Davies
James Martin-Davies

Reputation: 651

Change: 

@media only screen and (max-width: 480px)
    body.layout-mode-responsive .fp-roksprocket-showcase.rt-block {
    margin: 0;
}

to this:

@media only screen and (max-width: 480px)
    body.layout-mode-responsive .fp-roksprocket-showcase.rt-block {
        padding: 0;
    }
}

You forgot to close your selector properly too.

Upvotes: 0

Valentin Mercier
Valentin Mercier

Reputation: 5326

If you want to remove the padding put: padding: 0

Upvotes: 1

Related Questions