I started my first site from making mobile version. After that, i tried to add @media screen and (min-width: 500px) for desktops, but after that my mobile site looks like desktop. I don't understand why and don't know how to fix it. I kept mozilla's tutorials and that's it.

/* CSS */
        body{
            background-color: yellow;
            display: flex;
            margin: 1em;
            flex-flow: row wrap;
        }
        
        html{
            font-family: sans-serif;
        }
        header{
            order: 0;
            background-color: black;
            color:blanchedalmond;
            font-size: 3em;
            padding: 0.5em 1em;
            border-radius: 1em;
            
        }
       
       
    
      
       
            
        
        header  nav{
            
            border-top: 1px solid #999;
            margin-top: 0;
        }
        header ul{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        ...............
        @media screen and (min-width: 500px) 
        {header{
            display: flex; /* separate the nav and title */
            justify-content: space-between;
            align-items: center; 
            font-size: 1em;
            width: 100%;
        }
        header ul {
            display: flex; /* mav navigation display using flexbox */
            }

        header li {
            margin: 0; /*remove the margin used in the mobile design */
        }
        header nav{
            border:0;
        }
    }

Thanks in advance

CodePudding user response：

@media screen and (max-width: 500px), because min0width means that it will work when width > 500px.

CodePudding user response：

if you want to make mobile first website you should declare a max-width media-queray first at the above code and then the rest of your code will be applied to the desktop version

if you want to understand how both of them works read below

Media Queries Demystified: CSS Min-Width and Max-Width