Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: @media queries

  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    207
    Thanks
    68
    Thanked 2 Times in 2 Posts

    @media queries

    Does something like this is suppose to work?

    Code:
    @media screen and (max-width: 1225px)
    
    body {
    	width: 980px; 
    	margin: 0 auto;
    }
    
    @media screen and (min-width: 1226px)
    
    body {
    	
    	width: 1226px; 
    	margin: 0 auto; 
    }
    Two fixed website sizes depending on the screen size... It looks like it doesnt work...

    Thank you.
    Last edited by joliett89; 12-15-2012 at 03:12 PM.

  2. #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,814
    Thanks
    12
    Thanked 392 Times in 389 Posts
    You can, though your syntax is off:
    Code:
    @media only screen and (max-width: 1225px)
    	{
    	body {width:980px;margin:0 auto}
    	}
    @media screen and (min-width: 1226px)
    	{
    	body {width:1226px;margin:0 auto}
    	}
    I would do it slightly differently though:
    Code:
    body {width:1226px;margin:0 auto}
    @media only screen and (max-width: 1225px)
    	{
    	body {width:980px}
    	}
    @media only screen and (max-width: 980px)
    	{
    	body {width:800px}
    	}
    I.e, set the body with in css for your largest view, then incrementally apply changes to the style(s) as the page gets smaller.

    Dave

  3. Users who have thanked tracknut for this post:

    joliett89 (12-15-2012)

  4. #3
    Regular Coder
    Join Date
    Jul 2011
    Posts
    207
    Thanks
    68
    Thanked 2 Times in 2 Posts
    I figured out why it was not working. I forgot media query brackets { }.


 

Posting Permissions

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