How to override the width and height values in scss file

Question

I want to override the default values in scss file like

.auth-form {
width: 800px;
}

I change the width values in class auth-form scss file. But it is not working.

How to override the values in scss file. Please let me know.

Answer 1

Making assumptions on what will be the case you are probably facing a scope issue. If you have the following css:

.foo .bar {
    color: red;
}
.bar {
    color: blue;
}

.bar will always be red, because you are not overwriting the selector in the correct scope.

So in your case you need to specify the full selector:

.full.scope .auth-form {
    width: 800px;
}

Where .full.scope is the full selector to .auth-form . You can get the full selector using on the css you eqnt to overwrite using the browser inspector.

Another option will be to make the property prioritary using the !important css keyword so it will overwrite any previous definition:

.auth-form {
    width: 800px !important;
}

Hope it helps.