CSS: Remove specific style without actually removing it from said CSS file

Question

I am trying to mobilize a webpage. I to keep most of the current styles, but I also want to either override, or remove other styles. I know !important will override a style, but what if I just want to remove that specific style completely for the current page without removing it from the style sheet?

For example, what if I wanted to remove width or min-width from an element's style, but I did not want to specify another width. I am using jQuery Mobile, which takes care of a lot of those styles.

In this example I would have the files Styles.css and StylesMobile.css, where Style.css would have the following:

.buttonStyle {
  width: 100px;
  text-align: left; 
}

while StylesMobile.css has:

.buttonStyle {
  height: 10%;
  color: Red; 
}

I still want the text-align: left; from Styles.css, but not the width (along with the StylesMobile.css).

You might want to take a look at CSS media queries. This way it's easier to work with different types of screens and using certain styles. — Aeveus
– Aeveus, Commented Jun 19, 2014 at 18:54
In StylesMobile.css, you just need to overwrite width:100px by width:auto; to remove width properties. — G-Cyrillus
– G-Cyrillus, Commented Jun 19, 2014 at 19:02

pavel · Accepted Answer · 2014-06-19 18:56:13Z

1

CSS media queries is what you are looking for.

In this case, you wrote an example with width. If you want to override width in the mobile stylesheet, just use width: auto. Or set width only for resolution higher than any pixels (media queries as I wrote above).

answered Jun 19, 2014 at 18:56

pavel

27.3k11 gold badges47 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

T J · Accepted Answer · 2014-06-19 18:56:58Z

1

The default value of width is auto. so you can reset it by specifying width:auto !important

answered Jun 19, 2014 at 18:56

T J

43.2k13 gold badges87 silver badges142 bronze badges

Comments

user3211522 · Accepted Answer · 2014-06-19 18:55:48Z

0

You could try use specificity and making the button style for stylemobile more specfic such as .aclass .anotherclass .buttonStyle and that should override the normal buttonStyle

answered Jun 19, 2014 at 18:55

user3211522

531 silver badge9 bronze badges

Collectives™ on Stack Overflow

CSS: Remove specific style without actually removing it from said CSS file

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related