www.webdeveloper.com
Results 1 to 6 of 6

Thread: @media css

  1. #1
    Join Date
    Oct 2010
    Posts
    25

    @media css

    Hi Everyone,

    Is there a way to use a class style with @media in the css?

    This is what I have..

    Code:
    CSS:
    
    @media (max-device-width: 480px) {
    
    .changefonts{color: green;
                 margin-top: 40px;
                 margin-left: 200px;
    }
    .changefonts a:link{color: red;}
    .changefonts a:hover{color: gray;}
        
    }

    HTML Code:
    HTML:
    <h2 class="changefonts"> <a href=#">Example</a></h2>

    I'm basically wanting to adjust the color, width and margins. is this possible? The color isn't so much a big deal, but the margins are.

    I have it the way I want it while viewing on my main browsers (desktop) but on the mobile it's not.

    Whatever I try, nothing succeeds.

    Divs on the other hand seem to work just fine.


    Thank you.

  2. #2
    Join Date
    Oct 2013
    Posts
    614
    Missing a quote mark:

    <a href=#">

    should be:
    <a href="#">

    Don't know whether that helps, but it can't hurt.

  3. #3
    Join Date
    Oct 2010
    Posts
    25
    I saw that afterwards however, It didn't work.

    The @media css doesn't recognize it either

  4. #4
    Join Date
    Oct 2013
    Posts
    614
    Have you tried:
    Code:
    @media screen and (max-device-width: 480px) {
    
    .changefonts{color: green;
                 margin-top: 40px;
                 margin-left: 200px;
    }
    .changefonts a:link{color: red;}
    .changefonts a:hover{color: gray;}
        
    }
    Or:
    Code:
    @media (max-width: 480px) { /* -device removed */
    
    .changefonts{color: green;
                 margin-top: 40px;
                 margin-left: 200px;
    }
    .changefonts a:link{color: red;}
    .changefonts a:hover{color: gray;}
        
    }
    Link to possible help:
    https://developer.mozilla.org/en-US/.../Media_queries
    Last edited by Kevin2; 07-08-2014 at 03:21 PM.

  5. #5
    Join Date
    Jul 2014
    Posts
    3
    Quote Originally Posted by D1Lu5IoN View Post
    Hi Everyone,

    Is there a way to use a class style with @media in the css?

    ...

    Whatever I try, nothing succeeds.

    Divs on the other hand seem to work just fine.
    May I ask what mobile browser are you testing on? I too am working with media queries and tested on a Nokia Lumia 520 which worked perfectly, but on Chrome/Android browser they did not work. They work fine on desktop browser as well though like you said.
    Last edited by jedaisoul; 07-20-2014 at 03:30 AM. Reason: quote abbreviated

  6. #6
    Join Date
    Mar 2012
    Posts
    1,840
    Just a thought: have you tried using IDs instead of CLASSes? It might work. Might not be as convenient, but could be a work-around...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles