Unsure how to use media only screen codes

  • Profile Image
    betwrestling
    Asked on March 29, 2017 at 01:13 AM

    With these media only screen codes..

    @media only screen and (max-device-width: 320px){

    @media only screen and (max-device-width: 640px){

    Do i need to put the codes in between both the 320px code as well as the 640px code? Or can i just put all the codes underneath both of them?

    What i mean is i currently have it set like this..

    @media only screen and (max-device-width: 320px){

    CODE HERE

    @media only screen and (max-device-width: 640px){

    SAME CODE HERE

     

    But i'm wondering whether i could put the code underneath both @media screen codes, like the following..

    @media only screen and (max-device-width: 320px){

    @media only screen and (max-device-width: 640px){

    CODE HERE

     

    Hope that makes sense!

  • Profile Image
    Ian
    Answered on March 29, 2017 at 04:30 AM

    To understand how to write media queries please follow the articles :

    https://css-tricks.com/logic-in-media-queries/

    https://www.w3schools.com/css/css3_mediaqueries_ex.asp

    Hope this helps.