Template:Notice Box/styles.css - Revision history

SuperHamster: Vertical centering on image

2025-01-13T22:23:42Z

Vertical centering on image

← Older revision		Revision as of 22:23, 13 January 2025
Line 13:		Line 13:
	flex: 0 0 auto;		flex: 0 0 auto;
	text-align: center;		text-align: center;
			margin-top: auto;
			margin-bottom: auto;
	}		}

SuperHamster: Adjustments

2025-01-13T21:06:06Z

Adjustments

← Older revision		Revision as of 21:06, 13 January 2025
Line 1:		Line 1:
	.notice-box {		.notice-box {
	display: flex;		display: flex;
	~~flex-wrap: wrap;~~
	gap: 1em;		gap: 1em;
	padding: 1em;		padding: 1em;
Line 21:		Line 20:
	}		}

	@media (max-width: ~~500px~~) {		@media (max-width: 800px) {
	.notice-box {		.notice-box {
	flex-direction: column;		flex-direction: column;

SuperHamster: Create notice box stylesheet

2025-01-13T20:58:06Z

Create notice box stylesheet

New page

.notice-box {
display: flex;
flex-wrap: wrap;
gap: 1em;
padding: 1em;
margin-bottom: 4px;
box-sizing: border-box;
background-color: white;
border-radius: 5px;
width: 100%;
}

.notice-box .notice-box-img {
flex: 0 0 auto;
text-align: center;
}

.notice-box .notice-box-text {
flex: 1 1 auto;
text-align: center;
}

@media (max-width: 500px) {
.notice-box {
flex-direction: column;
}
.notice-box .notice-box-img {
width: 100%;
}
}