Remove CSS Attribute by Overriding CSS in Child Theme

Question

I have a theme I am trying to customize the style, and to do so, I have created a child theme. The child theme contains a style.css and I've been able to override certain attributes, but I can't remove them.

Example:

Original CSS:

.mvp-blog-story-img img {
    margin: 0 auto;
    position: relative; //I want to remove
   left: -9999px;//I want to remove
   right: -9999px;//I want to remove
   width: 100%;
   min-width: 560px;
   width: 100%;
}

Override CSS:

//This is what I want the final CSS to be
.mvp-blog-story-img img {
   margin: 0 auto;
   width: 100%;
   min-width: 0px;
 }

I'm assuming that this is happening because the style sheet will only override the attributes that exist in the parent theme and child theme; thus, leaving attributes that are NOT in the child theme, in the parent theme.

How can I remove the parent theme attributes within the child theme style.css?

Answer 1

I'm assuming that this is happening because the style sheet will only override the attributes that exist in the parent theme and child theme; thus, leaving attributes that are NOT in the child theme, in the parent theme.

That's not how it works. There's nothing special about WordPress parent theme and child theme stylesheets. They're just standard CSS style sheets, and they follow the same rules as any two stylesheets loaded on any other web page.

If you want to "remove" a style from one stylesheet in subsequent stylesheet, you need to provide a new value for it. If you have a position: relative; property, and you want to reset it to its default value you need to use initial:

.mvp-blog-story-img img {
    margin: 0 auto;
    width: 100%;
    min-width: 0px;
    position: initial;
}

Note that initial doesn't work in Internet Explorer, so if IE support is required, you will need to find out what the default value is and set it to that. For position, that's static:

.mvp-blog-story-img img {
    margin: 0 auto;
    width: 100%;
    min-width: 0px;
    position: initial;
}

Note that if the element's position is static then left and right won't do anything, so you don't need to reset those.

To find the default values for properties, the MDN web docs CSS reference is a good resource.