member
1,308
edits
Lightning266 (talk | contribs) (Test) |
Lightning266 (talk | contribs) mNo edit summary |
||
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
.content-container { | |||
.container { | |||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
gap: 10px; | gap: 10px; | ||
padding: 10px; | |||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
border-radius: 10px; | border-radius: 10px; | ||
background-color: #f9f9f9; | background-color: #f9f9f9; | ||
} | } | ||
.content-box { | |||
. | |||
flex: 1 1 22%; | flex: 1 1 22%; | ||
min-width: 200px; | |||
padding: 5px; | padding: 5px; | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
border-radius: 10px; | border-radius: 10px; | ||
background-color: #f9f9f9; | background-color: #f9f9f9; | ||
box-sizing: border-box; | |||
} | |||
/* Make tables responsive inside boxes */ | |||
.table-wrapper { | |||
overflow-x: auto; | |||
} | } | ||
.table { | .table { | ||
width: 100%; | |||
border-spacing: 0; | border-spacing: 0; | ||
} | } | ||
.table th, | |||
.table th | |||
.table td { | .table td { | ||
padding: 5px; | padding: 5px; | ||
border-bottom: 1px solid #ccc; | |||
text-align: left; | |||
} | } | ||
.table th img, | |||
.table th img | .table td img { | ||
width: 25px; | width: 25px; | ||
} | } | ||
/* Mobile: stack boxes vertically */ | |||
/* | |||
@media screen and (max-width: 768px) { | @media screen and (max-width: 768px) { | ||
.content-container { | |||
flex-direction: column; | |||
} | |||
.content-box { | |||
flex: 1 1 100%; | |||
width: 100%; | |||
} | |||
} | } | ||