CODEWITHSUNDEEP
htmlcss
Soatl
Soatl

Reputation: 10582

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

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

Upvotes: 1

Views: 117

Answers (3)

T J
T J

Reputation: 43156

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

Upvotes: 1

pavel
pavel

Reputation: 27072

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

Upvotes: 1

user3211522
user3211522

Reputation: 53

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

Upvotes: 0

Related Questions