Template:Cover box/styles.css

/***********************************/
/*    Responsive Music Box CSS     */
/***********************************/

/* This is an experimental stylesheet used to generate responsive content */

/* Music + BGM Box */
.responsive-width {
		float: left;
		width: 100%;
        height: 100%;
}

/* Flexbox container (list) */
ul.musicbgmbox {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    padding: 0;
}

/* Flexbox element (list element) */
/* Contains the Music + BGM Box Template */
ul.musicbgmbox > li{
    display: block;
    float: left;
    flex-basis: 100%;
    min-height: 0;
}

/* Responsive resizing based on screen width. */
@media only screen and (min-width: 1200px) {
    ul.musicbgmbox > li{
       flex-basis: 50%;
    }
}
@media only screen and (min-width: 2400px) {
	ul.musicbgmbox > li{
       flex-basis: 33.33%;
    }
}
@media only screen and (min-width: 3600px) {
	ul.musicbgmbox > li{
       flex-basis: 25%;
    }
}

/* For small screen widths, avoid squashed cells by making each cell expand to take up the whole row */
@media only screen and (max-width: 475px) {
    ul.musicbgmbox td {
       display: block;
       width: auto;
    }
}