2

I’d like to use simple @media query in css section of a component but I can’t make it work.

I prepared a codesandbox.io here in the component HelloWorld.vue:

I would expect to change from red to green when squeezing the window… What am I doing wrong? [EDIT: as somebody noted, it's working in some circumstancies, it's still not working if I put this code in a component in vuejs + vuetify (while it works in a component of standard vuejs)]

<style>
.vega {
  height: 100px;
  background-color: red;
}
@media (max-width: 400px) {
    .vega {
    height: 40px;
    background-color: green;
  }
}
</style>

Thanks in advance sandro

SOLVED: it was a bogus invisible char in css selector that prevented it to be applied...

Alessandro Dentella
  • 1,250
  • 2
  • 16
  • 30
  • The CSS you posted seems to work perfectly well (https://jsfiddle.net/3yaj9q2m/1/); you may need to debug further. – David Thomas Nov 10 '18 at 11:38
  • In fact thanks. Not only it works in pure html, it works in vuejs build with vue-cli. It's probably an issue with codesandbox. But I still have the problme as it does not work in vuetify – Alessandro Dentella Nov 11 '18 at 16:11
  • How did you solve it? I think I have the same problem. I put the style into a raw .html file. It works fine. It just does not work in style section of Vue component. – Mansur Jan 25 '20 at 22:55
  • @Mansur read the last line – Bhumit 070 Feb 03 '21 at 06:12
  • 1
    @Bhumit 070 turns out it does not relevant with vue or anything else. https://stackoverflow.com/questions/59914416/media-query-does-not-work-in-vuejs-style-tag/59947558#59947558 – Mansur Feb 03 '21 at 07:27

0 Answers0