Difference between revisions of "MediaWiki:Common.css"

From NY Science Standards Wiki
Line 1: Line 1:
 
/* CSS placed here will be applied to all skins */
 
/* CSS placed here will be applied to all skins */
 
@import "override.css";
 
@import "override.css";
 +
 +
.three-column-wrapper {
 +
  display: flex;
 +
  flex-direction: row;
 +
  flex-wrap: wrap;
 +
}
  
 
#sep-section, #dci-section, #cc-section {
 
#sep-section, #dci-section, #cc-section {
 +
  flex: 1;
 +
  min-width: 250px; /* prevents squishing on narrower screens */
 
   padding: 16px;
 
   padding: 16px;
 
   box-sizing: border-box;
 
   box-sizing: border-box;
 
}
 
}
  
@media (min-width: 769px) {
+
/* Optional: stack vertically on smaller screens */
  #sep-section, #dci-section, #cc-section {
 
    width: 33.3333%;
 
    float: left;
 
  }
 
}
 
 
 
 
@media (max-width: 768px) {
 
@media (max-width: 768px) {
   #sep-section, #dci-section, #cc-section {
+
   .three-column-wrapper {
     width: 100%;
+
     flex-direction: column;
    float: none;
 
 
   }
 
   }
 
}
 
}

Revision as of 07:54, 30 March 2025

/* CSS placed here will be applied to all skins */
@import "override.css";

.three-column-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#sep-section, #dci-section, #cc-section {
  flex: 1;
  min-width: 250px; /* prevents squishing on narrower screens */
  padding: 16px;
  box-sizing: border-box;
}

/* Optional: stack vertically on smaller screens */
@media (max-width: 768px) {
  .three-column-wrapper {
    flex-direction: column;
  }
}