User
Difference between revisions of "Mathis Back/bluell.css"
Mathis Back (talk | contribs) (audiobox class) |
Mathis Back (talk | contribs) |
||
(15 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
display: flex; | display: flex; | ||
justify-content: space-between; | justify-content: space-between; | ||
+ | padding: 0 1em; | ||
} | } | ||
Line 8: | Line 9: | ||
} | } | ||
− | #filterContainer p { | + | #filterContainer > p:first-child { |
− | + | display: flex; | |
+ | flex-direction: column; | ||
+ | margin: 20px 5px; | ||
+ | } | ||
+ | |||
+ | #buttonsContainer p { | ||
+ | display: flex; | ||
+ | flex-direction: row; | ||
+ | justify-content: space-evenly; | ||
+ | } | ||
+ | |||
+ | #buttonsContainer + p { | ||
+ | text-align: center; | ||
} | } | ||
Line 15: | Line 28: | ||
display: grid; | display: grid; | ||
grid-template-columns: 1fr 1fr; | grid-template-columns: 1fr 1fr; | ||
+ | } | ||
+ | |||
+ | @media (max-width: 1100px) { | ||
+ | #audioresults { | ||
+ | display: grid; | ||
+ | grid-template-columns: 1fr; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width: 750px) { | ||
+ | #totalContainer { | ||
+ | flex-direction: column; | ||
+ | align-items: center; | ||
+ | } | ||
} | } | ||
.audiobox { | .audiobox { | ||
− | |||
margin-right: 12px; | margin-right: 12px; | ||
+ | } | ||
+ | |||
+ | #totalContainer h2 { | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #audioPages { | ||
+ | display: flex; | ||
+ | justify-content: flex-start; | ||
+ | } | ||
+ | |||
+ | #audioPages a { | ||
+ | margin-right: 0.5em; | ||
} | } |
Latest revision as of 09:58, 16 September 2021
#totalContainer {
display: flex;
justify-content: space-between;
padding: 0 1em;
}
#filterContainer {
margin-top: 3em;
}
#filterContainer > p:first-child {
display: flex;
flex-direction: column;
margin: 20px 5px;
}
#buttonsContainer p {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
#buttonsContainer + p {
text-align: center;
}
#audioresults {
display: grid;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 1100px) {
#audioresults {
display: grid;
grid-template-columns: 1fr;
}
}
@media (max-width: 750px) {
#totalContainer {
flex-direction: column;
align-items: center;
}
}
.audiobox {
margin-right: 12px;
}
#totalContainer h2 {
text-align: center;
}
#audioPages {
display: flex;
justify-content: flex-start;
}
#audioPages a {
margin-right: 0.5em;
}