Question:

With wider screens, Devan does not want the panels to occupy their own rows as is the case with mobile devices. Instead, within the media query create style rules, define the width of the different classes of comic book panel images as follows:

Set the width of size1 img elements to 100%.

Set the width of size2 img elements to 60%.

Set the width of size3 img elements to 40%.

Set the width of size4 img elements to 30%.

I have written this so far, Could you help me figure out what i am doing wrong:

/* ===================================================

Tablet and Desktop Devices: Greater than 480 pixels

===================================================

*/

@media only screen and (min-width: 480px){

.size1

{

Width: 100%;

}

.size2

{

Width: 60%;

}

.size3

{

Width: 40%;

}

.size4

{

Width: 30%;

}

nav.horizontal ul

{

display: -webkit-flex;

display: flex;

-webkit-flex-flow: row ;

flex-flow: row ;

height: 40px;

}

ul >il

{

flex: 1 1 auto;

}

}