Template:Infobox item/style.css

/* In Template:Infobox item/styles.css */

/* --- Default Desktop Styles --- */ /* Targets the main table of the infobox */ .infobox {

 float: right;
 width: 300px; /* A standard desktop infobox width */
 margin: 0 0 1em 1em; /* Spacing: top, right, bottom, left */
 clear: right;
 border-spacing: 2px; /* A common infobox style */

}

/* --- Internal multi-column lists --- */ /* This part remains the same */ .infobox-responsive-list {

 list-style: none;
 padding-left: 0;
 margin: 0;
 -webkit-column-count: 2;
    -moz-column-count: 2;
         column-count: 2;
 -webkit-column-gap: 1em;
    -moz-column-gap: 1em;
         column-gap: 1em;

}

/* --- MOBILE STYLES using a Media Query --- */ /* This CSS only applies when the screen is 720px wide or less */ @media all and (max-width: 720px) {

 /* Make the whole infobox stack at the top */
 .infobox {
   float: none;
   width: auto; /* Take up the full available width */
   margin: 1em 0;
 }
 
 /* Make the internal lists a single column */
 .infobox-responsive-list {
   -webkit-column-count: 1;
      -moz-column-count: 1;
           column-count: 1;
 }

}