adam bien's blog

Responsive Design with A Media Query 📎

In this video, I added the following @media rule (media query) to an existing application (events):


@media screen and (max-width: 40em){
    main{
        grid-template-rows: 1fr 2fr 6fr 1fr;
        grid-template-columns: 1fr;
        grid-template-areas: 
        "status"
        "menu"
        "view"
        "footer";
    }
    li{
        display: inline;
    }
}

to implement a "Responsive Design":

This bonus video is a part of the: webcomponents-with-redux.training