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
    172
    Thanks
    64
    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 02:12 PM.

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,209
    Thanks
    7
    Thanked 268 Times in 267 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

  • Users who have thanked tracknut for this post:

    joliett89 (12-15-2012)

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Posts
    172
    Thanks
    64
    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
    •