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
  1. #1
    Regular Coder
    Join Date
    Jan 2013
    Location
    Australia
    Posts
    118
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Question mobile first media queries question.

    Hello I am making my first proper attempt at responsive website staring from the beginning.

    but doing it mobile first approach using open cart frame work which is default template made but making my own theme

    I not sure if set the media queries correctly for container

    Code:
    @media screen and (min-width: 20.000em) {
        #container {
            margin: 0px auto;
            padding-left: 10px;
            padding-right: 10px;
        }
    }
    
    @media screen and (min-width: 30.000em) {
        #container {
            margin: 0px auto;
            padding-left: 10px;
            padding-right: 10px;
        }
    }
    
    @media screen and (min-width: 40.000em) {
        #container {
            margin: 0px auto;
            padding-left: 20px;
            padding-right: 20px;
        }
    
    @media screen and (min-width: 50.000em) {
        #container {
            margin: 0px auto;
            padding-left: 20px;
            padding-right: 20px;
        }
    }
    
    @media screen and (min-width: 60.000em) {
        #container {
            margin: 0px auto;
            padding-left: 20px;
            padding-right: 20px;
        }
    }

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,608
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Why are you not sure? Is anything not working?
    One suggestion, though: Save the redundant decimals if it’s all zero anyway.

  • #3
    New Coder
    Join Date
    Jun 2007
    Location
    Quebec, Canada
    Posts
    64
    Thanks
    4
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by vipercode View Post
    Hello I am making my first proper attempt at responsive website staring from the beginning.

    but doing it mobile first approach using open cart frame work which is default template made but making my own theme

    I not sure if set the media queries correctly for container

    Code:
    @media screen and (min-width: 40.000em) {
        #container {
            margin: 0px auto;
            padding-left: 10px;
            padding-right: 10px;
        }
    }
    
    @media screen and (min-width: 30.000em) {
        #container {
            margin: 0px auto;
            padding-left: 10px;
            padding-right: 10px;
        }
    }
    
    @media screen and (min-width: 40.000em) {
        #container {
            margin: 0px auto;
            padding-left: 20px;
            padding-right: 20px;
        }
    
    @media screen and (min-width: 50.000em) {
        #container {
            margin: 0px auto;
            padding-left: 20px;
            padding-right: 20px;
        }
    }
    
    @media screen and (min-width: 60.000em) {
        #container {
            margin: 0px auto;
            padding-left: 20px;
            padding-right: 20px;
        }
    }
    Yes and no. It works, but most of it is useless. There is no need to repeat the container everywhere. By example, this would be much cleaner :

    Code:
    #container { /*your mobile first overwitten later */
        margin: 0 auto;
        padding: 0 10px
    }
    @media screen and (min-width: 40em) { /* since your change only comes at 40em, you only need this one */
        #container {
            padding: 0 20px
        }
    }
    I have read about em, but have no experience with them. You should only use them if you are comfortable. If not, simply use pixels. Make sure you set a width if you plan on centering with an auto margin


  •  

    Tags for this Thread

    Posting Permissions

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