Grow your CSS skills. Land your dream job.

PLS HELP WITH THIS @MEDIA QUERY

  • # March 5, 2013 at 6:27 am

    Below are the @media queries in added in my css file. I got it from [here](http://css-tricks.com/lark-queries/ “css tricks”). 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.’}
    }

    # March 5, 2013 at 6:45 am

    We need to see a live link or a reduced case in Codepen.

    # March 5, 2013 at 6:56 am

    Ok. here is the codepen[ link](http://codepen.io/anon/pen/uzfhH “”)

    # March 5, 2013 at 7:12 am

    You don’t want a space between the colon and ‘before’

    body:before {

    }

    http://codepen.io/Paulie-D/pen/IFyfx

    # March 5, 2013 at 7:19 am

    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.](http://css-tricks.com/lark-queries/ “”)

    Pls solve it for me. Thank u.

    # March 5, 2013 at 7:22 am

    Check [here.](http://css-tricks.com/examples/LarkQueries/ “”)

    # March 5, 2013 at 7:30 am

    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.

    # March 5, 2013 at 7:33 am

    Everything works as intented.

    # March 5, 2013 at 7:42 am

    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.

    # March 5, 2013 at 7:45 am

    Then there probably is a conflict with some exisiting CSS. We can’t help you without seeing the code.

    # March 5, 2013 at 7:45 am

    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.

    # March 5, 2013 at 8:09 am

    Ok. Here is the [Codepen.](http://codepen.io/anon/pen/BoDdu “”)

    Thank u.

    # March 5, 2013 at 8:21 am

    That Codepen works fine so I don’t understand the problem.

    Are you zooming instead of re-sizing?

    # March 5, 2013 at 8:23 am

    Am resizing. as in shrinking my browser window to the extreme left.

    # March 5, 2013 at 8:30 am

    @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.

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".