Visual Studio Code to browser - Media queries...
Hi everyone!
I have tried everything I can think of and I just cannot figure out what is causing this issue I'm seeing. In Visual Studio Code I connected to Live Server, and even tried alternatives...but when I go to my browser preview, all of my media queries are stripped out. Has anyone come across this or know how to fix it? Thank you!
32 Replies
you will need to provide more info probably. Do you have a repo or code to share that can help us?
I can only assume you are not importing it properly or something something file paths.
you might need this in your <head> too
<meta name="viewport" content="width=device-width, initial-scale=1">
š® š¤·āāļøPlease don't share binary files, especially zip files. @Brian R
I don't even know what a binary file is.
lol. How can I share this?
github works just fine
Is this better?
Oh, OK.
Sorry. Im learning.
a binary file is a file that isn't plain text
no worries, it's just a safety thing, too easy to spread malicious software through zips and pdfs and such
Is this right? https://github.com/labradorconnect/fluid-site-lab.git
GitHub
GitHub - labradorconnect/fluid-site-lab: Working Site to Learn Fluid
Working Site to Learn Fluid. Contribute to labradorconnect/fluid-site-lab development by creating an account on GitHub.
I think something went wrong with your commit, it's just a bunch of PNGs
Every time I try to upload the HTML, it just disappears.
how are you uploading it?
I was just creating a file.
I do see an index.html now https://github.com/labradorconnect/fluid-site-lab/blob/main/index.html
GitHub
fluid-site-lab/index.html at main Ā· labradorconnect/fluid-site-lab
Working Site to Learn Fluid. Contribute to labradorconnect/fluid-site-lab development by creating an account on GitHub.
š
you're referencing your style.css like this:
but the style.css file is in the same folder as index.html
Not on my server. I just did that in Github. Sorry.
what do you mean exactly btw with "all my media queries are stripped out"?
They just aren't there. I can't explain it.
you're inspecting body, you don't have any body rules in your media query
Thanks. But here I have selected the div with "hero-bg-mobile" and there is no media query reflected.
pff, I'm not sure what's going on but it's also very hard to tell without a version of the code I can see in my browser.
Your title here
Your description here
the media queries are there and working.... is there a specific issue you are having? I'm confused
same here
they only show up in the inspector when you hit the right width for them, but they're definitely there and functioning
but that's intended behavior
Yes. But what I'm saying is, in Visual Studio Code, when I'm working in there and using Live Server to view, they aren't there. That's what's weird.
so that screenshot you sent, the viewport is less than 1200px?
paint says it's 1290px wide, so the media query wouldn't have activated in that screenshot and therefor they aren't visible in the inspector
I see it now! I think my Divs are messed up. lol.
that could cause some issues š
Thank you SO much! I just have one more issue. I have the following, but I can't get the overlay to fire. I have tried different z-index values. I must be missing something.
https://www.labradorconnect.com/dev
.founder-main {
display: flex !important;
flex-direction: column !important;
justify-content: center;
align-items: center;
width: 100%;
height: CALC(100vh - 5rem);
}
.founder-main::before { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.6); z-index: 1; }
}
.founder-main::before { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.6); z-index: 1; }
Your title here
Your description here
make a new post for this in #front-end please, we're well off VS Code now
OK. š
might be a good idea to be a little more descriptive and/or add a screenshot, cause I have no idea what you mean by "get the overlay to fire"
did you solve the issue? I saw your post appear briefly, but it's vanished again?