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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts

    CSS3 media query - smartphone landscape problem

    Hi guys,

    I've made a responsive web design which scales nicely on smartphones when hold in portrait view. However, whenever the device is held in landscape view the CSS for the responsive design is not applied and the standard 'pc' version is shown. Can anybody tell me where I missed the point?

    This is my media query:

    Code:
    @media only screen 
    	and (min-width:320px) 
    	and (max-width : 480px) {
    Code goes here
    }
    The css is from here: http://css-tricks.com/snippets/css/m...ndard-devices/

    I would like the same CSS to be applied when held in both landscape- and portrait mode.
    Last edited by CaptainB; 03-02-2012 at 03:31 PM.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,627
    Thanks
    0
    Thanked 648 Times in 638 Posts
    How wide is the screen when in landscape mode? For it to be doing what you say it is probably greater than 480 pixels.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Quote Originally Posted by felgall View Post
    How wide is the screen when in landscape mode? For it to be doing what you say it is probably greater than 480 pixels.
    As far as I'm concerned (and from what I have been able to find, i.e. the provided link), smartphones are as standard 480px in landscape mode - but still is doesn't seem to work.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,627
    Thanks
    0
    Thanked 648 Times in 638 Posts
    Have you tried changing the 480 to 481 to see if that makes any difference?
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Quote Originally Posted by felgall View Post
    Have you tried changing the 480 to 481 to see if that makes any difference?
    Yes, same result
    Anybody else?

  • #6
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    I solved the problem - did probably have to do with me using max-width instead of max-device-width: http://www.blog.highub.com/mobile-2/...media-queries/


  •  

    Posting Permissions

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