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

Comments:

Post a Comment:
  • HTML Syntax: NOT allowed
...the last 150 posts
...the last 10 comments
License