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 5 of 5

Thread: CSS If width...

  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post

    Question CSS If width...

    Hello,

    I have forgotten how to implement the code in the css to display things differently on the width...

    I know it starts with '@..... {' and then you close the bracket and add the css in the center for the specified screen size...

    When I research it I keep getting Javascript ways and whatnot, I just want the basic CSS way...

    Best Regards,
    Tim

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    It’s called media query.

  • Users who have thanked VIPStephan for this post:

    MrTIMarshall (11-15-2012)

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Thank you very much VIPStephan

  • #4
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Code:
    @media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
      body {
        background: #ccc;
      }
    }
    So an iPhone is 320x480, what do I do so it has a different layout based on an exact width?

    Edit: Oh and does anything else need to be implemented for those phones with tilting software on, I presume just another width?
    Last edited by MrTIMarshall; 11-15-2012 at 12:10 PM.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    There is not only min-width as query, there is also width and [min-|max-]device-width, and orientation mode (portrait/landscape) among many others. Have a look at this three-part tutorial on CF’s (former) sister site JavaScript Kit; and be sure to read part three, too.

  • Users who have thanked VIPStephan for this post:

    MrTIMarshall (11-16-2012)


  •  

    Posting Permissions

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