Removing a parent style on CSS hierarchy

Question

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?

score 1 · Answer 1 · answered Jul 09 '14 at 17:44

1

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

answered Jul 09 '14 at 17:44

Valentin Mercier

5,256
3
26
50

score 1 · Answer 2 · edited May 23 '17 at 12:05

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).

T.Schinler · Answer 3 · 2014-07-09T18:33:30.547

0

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.

edited Jul 09 '14 at 18:33

answered Jul 09 '14 at 17:46

T.Schinler

25
6

He wanted the **padding** removed too. Edited. – James Martin-Davies Jul 09 '14 at 17:50

score 0 · Answer 4 · answered Jul 09 '14 at 17:47

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.

score 0 · Accepted Answer · answered Jul 09 '14 at 17:53

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;
   }
}

Removing a parent style on CSS hierarchy

5 Answers5