No edit summary |
No edit summary |
||
| Line 30: | Line 30: | ||
text-align: center; | text-align: center; | ||
box-sizing: border-box; /* Include padding and border in the element's total width and height */ | box-sizing: border-box; /* Include padding and border in the element's total width and height */ | ||
} | |||
@media (max-width: 900px) { | |||
.box { | |||
flex: 1 1 100%; /* Each box takes full width in smaller viewports */ | |||
} | |||
} | } | ||
Revision as of 03:50, 2 June 2024
/* CSS placed here will be applied to all skins */
.image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.image-grid img {
max-width: 100%;
height: auto;
}
body.page-Main_Page div#siteSub { display: none !important; }
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 20px;
}
.box {
background-color: #1a1a1a;
color: #ffffff;
padding: 20px;
border-radius: 10px;
margin: 10px;
flex: 1 1 250px; /* Ensure each box has a minimum width of 250px */
max-width: 300px; /* Set a maximum width to prevent stretching */
text-align: center;
box-sizing: border-box; /* Include padding and border in the element's total width and height */
}
@media (max-width: 900px) {
.box {
flex: 1 1 100%; /* Each box takes full width in smaller viewports */
}
}