remove styling from child theme

0 Views

i am using wordpress and would like to delete a certain aspect of my parent theme’s style, but also do not want to touch parent theme’s styles.css. Thus i would like to remove that element from a child theme’s style sheet, but how would i do that?

right now my child theme calls on my parent theme styles through

Read More
@import url("../parenttheme/style.css");

now i want to remove the whole section of 

@media only screen and (max-width: 767px) { 
.container { max-width: 95% }
.sidebar-container { padding: 0; margin-top: 50px; }
.masthead-right { display: none }
.single-nav { position: inherit; top: auto; right: auto; margin: 20px 0 0; }
.single-nav-left, .single-nav-right { margin-left: 0; margin-right: 3px; }
.comment-list .children { margin-left: 0 }
#copyright, #footer-menu { text-align: center }
#footer-menu ul { float: none; margin-top: 5px; }
#footer-menu li { float: none; display: inliene; display: inline-block; margin-left: 0; margin-right: 10px; }
.related-posts .span_6, .related-posts .span_18, .related-posts .span_8 { width: 100%; padding: 0; }
.related-posts .span_8, .related-posts .span_6 { margin-bottom: 1.5em }
.tax-archives-filter { position: inherit; position: relative; top: auto; right: auto; margin: 30px 0 0; }
.tax-archives-filter > li { width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.tax-archives-filter i { position: absolute; top: 50%; margin-top: -5px; right: 13px; }

}
in my parent theme styles by calling on it and nulling it from child theme.

Post Views: 0

Related posts

Leave a Reply

3 comments

  1. If all you need is to reset that particular line, simply set it to 

    .masthead-right{
    float:none;
}

    A word of advise, never work on the parent css. Alter the child theme css or add a new custom.css and declare it directly below the css that you wish to overwrite.

    EDIT

    Just refreshed and noticed gaynorvader suggested the same…

  2. You can override the css in a few ways. Either by having the code you want to overwrite with further down ( for example .masthead-right{float: none;} in your child css should work ) or by using a more specific selector ( for example #containingdiv .masthead-right{float:none;} to use your example again ). This will overwrite any pages with the child css included.

  3. I don’t think this is possible.

    Since you are creating a child theme, you do – by definition – load the parent’s stylesheet. The only way to remove some parts of the CSS is to override it. You can do this either by using a more specific CSS selector (what I recommend) or by adding the !important keyword to your custom attribute (which I don’t recommend in most cases).

    If you want to get rid of larger portions of your parent theme’s CSS file, I’d consider not loading it at all. You could create a fully custom stylesheet instead (based on your parent stylesheet).