Cant use correctly @media in css

user_17516888 0
Viewed 56

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

css
2 Answers

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

user_134947500

for mobile version.

@media screen and (max-width: 500px)

and then the rest of your code will apply for desktop-version

user_154618120
Related