Below are the @media queries in added in my css file. I got it from here. I wanted to test it, but it's not working perfectly. It's working in the source file, but i changed the .row h2 span: after{content'';} to** body:before{content:'';}**, but it's only this: @media screen and (max-width:1890px) {
body:before {
content: 'Scintillating.'}
} that is showing all through when i compress or expand the window. What could be the problem?
/@MEDIA QUERIES/
@media screen and (min-width:1921px) {
body: before {
content: 'A CSS-TRICKS GUEST AUTHOR!!!'}
}
@media screen and (max-width:1920px) {
body:before {
content: 'Larger than life.'}
}
@media screen and (max-width:1910px) {
body:before {
content: 'Unconventional.'}
}
@media screen and (max-width:1900px) {
body: before {
content: 'Flabbergasting.'}
}
@media screen and (max-width:1890px) {
body:before {
content: 'Scintillating.'}
}
@media screen and (max-width:1880px) {
body: before {
content: 'Extraordinary.'}
}
@media screen and (max-width:1870px) {
body: before {
content: 'Unforgettable.'}
}
@media screen and (max-width:1860px) {
body: before {
content: 'Unpredictable.'}
}
@media screen and (max-width:1850px) {
body: before {
content: 'Dumbfounding.'}
}
@media screen and (max-width:1840px) {
body: before {
content: 'Electrifying.'}
}
@media screen and (max-width:1830px) {
body: before {
content: 'Overwhelming.'}
}
@media screen and (max-width:1820px) {
body: before {
content: 'Incomparable.'}
}
@media screen and (max-width:1810px) {
body: before {
content: 'Entertaining.'}
}
ok, but that is not what I want. this just showed the last query. i want a situation where the words in the content:'' will be changing as i re-size my browser window. Like this source.
The source works even on my computer.
But when I added it in another work and preview, it will not work. It will be showing only the last query. Even when i resize the window.
@CodeGraphics, other than your extreme sized media queries, it's working just fine. If I take out the 1 in front of 1800, 1810, 1820, etc. so it's just 800, 810, 820, 830 etc..it works like a charm, since I don't have a dual monitor right now like @Paulie_D.
Below are the @media queries in added in my css file. I got it from here. I wanted to test it, but it's not working perfectly. It's working in the source file, but i changed the .row h2 span: after{content'';} to** body:before{content:'';}**, but it's only this: @media screen and (max-width:1890px) { body:before { content: 'Scintillating.'} } that is showing all through when i compress or expand the window. What could be the problem?
/@MEDIA QUERIES/ @media screen and (min-width:1921px) { body: before { content: 'A CSS-TRICKS GUEST AUTHOR!!!'} } @media screen and (max-width:1920px) { body:before { content: 'Larger than life.'} } @media screen and (max-width:1910px) { body:before { content: 'Unconventional.'} } @media screen and (max-width:1900px) { body: before { content: 'Flabbergasting.'} }
@media screen and (max-width:1890px) { body:before { content: 'Scintillating.'} } @media screen and (max-width:1880px) { body: before { content: 'Extraordinary.'} } @media screen and (max-width:1870px) { body: before { content: 'Unforgettable.'} } @media screen and (max-width:1860px) { body: before { content: 'Unpredictable.'} } @media screen and (max-width:1850px) { body: before { content: 'Dumbfounding.'} } @media screen and (max-width:1840px) { body: before { content: 'Electrifying.'} } @media screen and (max-width:1830px) { body: before { content: 'Overwhelming.'} } @media screen and (max-width:1820px) { body: before { content: 'Incomparable.'} } @media screen and (max-width:1810px) { body: before { content: 'Entertaining.'} }
We need to see a live link or a reduced case in Codepen.
Ok. here is the codepen link
You don't want a space between the colon and 'before'
http://codepen.io/Paulie-D/pen/IFyfx
ok, but that is not what I want. this just showed the last query. i want a situation where the words in the content:'' will be changing as i re-size my browser window. Like this source.
Pls solve it for me. Thank u.
Check here.
Have you looked at the pixel values in the media queries you are using (as supplied in your Codepen)...they are HUGE.
I'm fortunate enough to have a dual monitor set-up and I can assure you my Codepen DOES work.
Everything works as intented.
The source works even on my computer. But when I added it in another work and preview, it will not work. It will be showing only the last query. Even when i resize the window.
Then there probably is a conflict with some exisiting CSS. We can't help you without seeing the code.
Then your code is wrong....I gave you the correct one (based on your Codepen) with corrected CSS.
Or...what @HugoGiraudel said. Without a live link we can't help.
Ok. Here is the Codepen.
Thank u.
That Codepen works fine so I don't understand the problem.
Are you zooming instead of re-sizing?
Am resizing. as in shrinking my browser window to the extreme left.
@CodeGraphics, other than your extreme sized media queries, it's working just fine. If I take out the 1 in front of 1800, 1810, 1820, etc. so it's just 800, 810, 820, 830 etc..it works like a charm, since I don't have a dual monitor right now like @Paulie_D.
@ChrisP, I removed the 1 in all of them, still it's not working. It's showing only the first and last queries. Check the codepen..
But this is working perfectly as I resize the browser.
No, it shows only the first and third queries.
@media screen and (min-width:921px) { body:before { content: 'A CSS-TRICKS GUEST AUTHOR!!!'} }
@media screen and (max-width:910px) { body:before { content: 'Unconventional.'} }
you're missing a closing curly brace in the css (after flabbergasting).
@CodeGraphics, it was broke at Unconventional because you didn't have the two closing braces...
http://codepen.io/ChrisPlz/pen/jKJCe
It is showing all of the queries, but it's kinda hard to tell when they're only 10px apart.
Perfect. You guys are wizards. Thank you wolfcry911 and ChrisP. The problem was the unclosed curly brace in the css (after flabbergasting)
Thank you. This is a great forum.