CODEWITHSUNDEEP
cssvue.jssass
Jonas Tamoševičius
Jonas Tamoševičius

Reputation: 185

Vue JS Media Query does not work, it does not overwrite the base css even if it is in the correct hierarchy

For some reason SCSS does not work as it is supposed to work, I have all my styles in a correct hierarchy, I have base CSS on top, and them media queries underneath, but for some reason I need to write - !important at the end of all the properties I overwrite, otherwise it does not work.

Styles:

    /* ***********Registration************** */

.register {
  text-align: center;
  .register_choices-wrapper {
    display: flex;
    justify-content: center;
    .register_choices {
      width: 50%;
      display: flex;
      p,
      input,
      form {
        display: inline;
      }
      form {
        display: flex;
        justify-content: space-between;
        width: 80%;
      }
      input:hover {
        cursor: pointer;
      }
      label {
        margin-left: 6px;
      }
    }
  }
  .register_inputs {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    input {
      width: 50%;
      margin-top: 10px;
    }
    .formButton {
      width: 50%;
      margin-top: 10px;
    }
  }
}

/* ******************************** */

Media Queries:

    @media screen and (max-width: 768px) {
  .register_choices {
    width: 50%;
    display: block;
    p {
      text-align: left;
    }
    form {
      flex-wrap: wrap;

      width: 100%;
      div:nth-child(1) {
        margin-left: 0;
      }
    }
  }
}
@media screen and (max-width: 600px) {
  .register_choices form {
    display: block;
  }
  form input {
    width: 70%;
  }
}
@media screen and (max-width: 510px) {
  form input {
    width: 90%;
  }
}

And index.scss so you could see hierarchy is correct

@import "colors";
@import "fonts";
@import "fontSizes";
@import "classes";
@import "animations";
@import "styles";
@import "mediaq";

Media queries ar imported last.

Upvotes: 2

Views: 3935

Answers (1)

SC Kim
SC Kim

Reputation: 600

SCSS does not work as it is supposed to work

Try "deep" > in your <style scoped> or ::v-deep combinator?

Vue adds data attr with an unique value to all tags in your component and then silently modifies your CSS/SASS selectors to rely on this data attribute.

Vue.js 2: Scoped style not working with sass/scss

Upvotes: 1

Related Questions