How to exclude certain code from style.css? [closed]

Question

I have a code in my theme's stylesheet that looks like this. I would like for my code to not use the width property that is set in here. Deleting is not the option as that would be only temporary solution until the next update of my theme. What can i do, so that this with property is not used?

@media (max-width: 991px) and (min-width: 544px){
  .footer-bottom-widgets .columns {
  position: relative;
  float: left;
  min-height: 1px;
  padding-left: .9375rem;
  padding-right: .9375rem;
  width:33.333%;
  }
}

Answer 1

I would not suggest creating a child theme to override a single CSS line. You can simply use the theme customizer and add your CSS to the additional CSS box. Most CSS properties accept an unset or inherit value. So, you can paste the following code into the additional CSS box:

@media (max-width: 991px) and (min-width: 544px){
  .footer-bottom-widgets .columns {
      width: unset;
  }
}

Since the additional CSS is added as inline, the priority is higher than the original CSS, which will override the original styles.

Answer 2

Research the the topic creating a child theme - this will enable you to continue to use the unchanged parent (original) theme, but have your modifications in a separate directory structure.

The parent theme will continue to have the ability to be updated, but you can also do whatever you want to override/change the style or even page template components, if you wish to.

Your use case is one of the reasons the child theme mechanism is in place.

See this topic as well, as it discusses the correct handling of .css components.