media query and vuejs









up vote
0
down vote

favorite












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






css vuejs2 media-queries vuetify.js codesandbox







share|improve this question























  • The CSS you posted seems to work perfectly well (jsfiddle.net/3yaj9q2m/1); you may need to debug further.
    – David Thomas
    2 days ago










  • 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
    yesterday














up vote
0
down vote

favorite












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






css vuejs2 media-queries vuetify.js codesandbox







share|improve this question























  • The CSS you posted seems to work perfectly well (jsfiddle.net/3yaj9q2m/1); you may need to debug further.
    – David Thomas
    2 days ago










  • 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
    yesterday












up vote
0
down vote

favorite









up vote
0
down vote

favorite











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






css vuejs2 media-queries vuetify.js codesandbox







share|improve this question















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






css vuejs2 media-queries vuetify.js codesandbox




css vuejs2 media-queries vuetify.js codesandbox






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited yesterday

























asked 2 days ago









Alessandro Dentella

18011




18011











  • The CSS you posted seems to work perfectly well (jsfiddle.net/3yaj9q2m/1); you may need to debug further.
    – David Thomas
    2 days ago










  • 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
    yesterday
















  • The CSS you posted seems to work perfectly well (jsfiddle.net/3yaj9q2m/1); you may need to debug further.
    – David Thomas
    2 days ago










  • 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
    yesterday















The CSS you posted seems to work perfectly well (jsfiddle.net/3yaj9q2m/1); you may need to debug further.
– David Thomas
2 days ago




The CSS you posted seems to work perfectly well (jsfiddle.net/3yaj9q2m/1); you may need to debug further.
– David Thomas
2 days ago












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
yesterday




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
yesterday












1 Answer
1






active

oldest

votes

















up vote
0
down vote













You have not specified the media type to apply the rule too like print or screen




@media screen and (max-width: 400px)







share|improve this answer




















  • No, this is not the problem. This is legitimate, in fact it works in th jsfiddle reported above. The problem must be inherent to vuetify and single file components
    – Alessandro Dentella
    yesterday










  • I tried it in fiddle js and that worked with screen but not without when in the scope of VUE. For some reason Vue does not like the media type target being omitted even is valid in standard css.
    – Marc Newton
    yesterday











Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













 

draft saved


draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53238285%2fmedia-query-and-vuejs%23new-answer', 'question_page');

);

Post as a guest

















1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
0
down vote













You have not specified the media type to apply the rule too like print or screen




@media screen and (max-width: 400px)







share|improve this answer




















  • No, this is not the problem. This is legitimate, in fact it works in th jsfiddle reported above. The problem must be inherent to vuetify and single file components
    – Alessandro Dentella
    yesterday










  • I tried it in fiddle js and that worked with screen but not without when in the scope of VUE. For some reason Vue does not like the media type target being omitted even is valid in standard css.
    – Marc Newton
    yesterday















up vote
0
down vote













You have not specified the media type to apply the rule too like print or screen




@media screen and (max-width: 400px)







share|improve this answer




















  • No, this is not the problem. This is legitimate, in fact it works in th jsfiddle reported above. The problem must be inherent to vuetify and single file components
    – Alessandro Dentella
    yesterday










  • I tried it in fiddle js and that worked with screen but not without when in the scope of VUE. For some reason Vue does not like the media type target being omitted even is valid in standard css.
    – Marc Newton
    yesterday













up vote
0
down vote










up vote
0
down vote









You have not specified the media type to apply the rule too like print or screen




@media screen and (max-width: 400px)







share|improve this answer












You have not specified the media type to apply the rule too like print or screen




@media screen and (max-width: 400px)








share|improve this answer












share|improve this answer



share|improve this answer










answered 2 days ago









Marc Newton

1,5751317




1,5751317











  • No, this is not the problem. This is legitimate, in fact it works in th jsfiddle reported above. The problem must be inherent to vuetify and single file components
    – Alessandro Dentella
    yesterday










  • I tried it in fiddle js and that worked with screen but not without when in the scope of VUE. For some reason Vue does not like the media type target being omitted even is valid in standard css.
    – Marc Newton
    yesterday

















  • No, this is not the problem. This is legitimate, in fact it works in th jsfiddle reported above. The problem must be inherent to vuetify and single file components
    – Alessandro Dentella
    yesterday










  • I tried it in fiddle js and that worked with screen but not without when in the scope of VUE. For some reason Vue does not like the media type target being omitted even is valid in standard css.
    – Marc Newton
    yesterday
















No, this is not the problem. This is legitimate, in fact it works in th jsfiddle reported above. The problem must be inherent to vuetify and single file components
– Alessandro Dentella
yesterday




No, this is not the problem. This is legitimate, in fact it works in th jsfiddle reported above. The problem must be inherent to vuetify and single file components
– Alessandro Dentella
yesterday












I tried it in fiddle js and that worked with screen but not without when in the scope of VUE. For some reason Vue does not like the media type target being omitted even is valid in standard css.
– Marc Newton
yesterday





I tried it in fiddle js and that worked with screen but not without when in the scope of VUE. For some reason Vue does not like the media type target being omitted even is valid in standard css.
– Marc Newton
yesterday


















 

draft saved


draft discarded















































 


draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53238285%2fmedia-query-and-vuejs%23new-answer', 'question_page');

);

Post as a guest

































































-

Popular posts from this blog

27

Image
www.msyz777.com_www.msyz888.com_www.msyz999.com window._bd_share_config="common":"bdSnsKey":,"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"16","share":,"image":"viewList":["qzone","tsina","tqq","renren","t163"],"viewText":"&#2013266103;&#2013265942;&#2013265935;&#2013265933;&#2013266101;&#2013266109;&#2013266083;&#2013266106;","viewSize":"16","selectShare":"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","t163"];with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/...
Read more

Top Tejano songwriter Luis Silva dead of heart attack at 64

Image
Ramiro Burr's New Blog - to go back: www.ramiroburr.com From Latin rock to reggaeton, boleros to blues,Tex-Mex to Tejano, conjunto to corridos and beyond, Ramiro Burr has it covered. If you have a new CD release, a trivia question or are looking for tour info, post a message here or e-mail Ramiro directly at: musicreporter@gmail.com Top Tejano songwriter Luis Silva dead of heart attack at 64 By Ramiro Burr on October 23, 2008 8:40 AM | Permalink | Comments (12) | TrackBacks (0) UPDATE: Luis Silva Funeral Service details released Visitation 4-9 p.m. Saturday, Rosary service 6 p.m. Saturday at Porter Loring, 1101 McCullough Ave Funeral Service 10:30 a.m. Monday St. Anthony De Padua Catholic Church, Burial Service at Chapel Hills, 7735 Gibbs Sprawl Road. Porter Loring (210) 227-8221 Related New Flash: Irma Laura Lopez: long time record promoter killed in accident NewsFlash: 9:02 a.m. (New comments below) Luis Silva , one of the most well-known ...
Read more

2013 DreamHack Counter-Strike: Global Offensive Championship

Image
2013 DreamHack Counter-Strike: Global Offensive Championship From Wikipedia, the free encyclopedia Jump to navigation Jump to search This article needs additional citations for verification . Please help improve this article by adding citations to reliable sources. Unsourced material may be challenged and removed. (July 2018) (Learn how and when to remove this template message) DreamHack 2013 Tournament information Sport Counter-Strike: Global Offensive Location Jönköping, Sweden Dates November 28, 2013–November 30, 2013 Administrator(s) DreamHack Tournament format(s) 16 team group stage Eight team single-elimination playoff Venue Elmia Exhibition and Convention Centre Teams 16 teams Purse $250,000 USD Final positions Champions Fnatic 1st runners-up Ninjas in Pyjamas 2nd runners-up compLexity Gaming VeryGames MVP Jesper "JW" Wecksell EMS One Katowice 2014 → The 2013 DreamHack SteelSeries Counter Strike: Gl...
Read more