FF
Free Online Tools For Developers
Buy Me A Coffee
CSS Beautifier
Code Minifiers - Beautifier
CSS Beautifier
Formats a CSS files with the chosen indentation level for optimal readability. Supports 4 indentation levels: 2 spaces, 3 spaces, 4 spaces and tabs.

Option 1: Copy-paste your CSS here
.section-header {
	display: none;
}

/* bottom container elements: News, featured, info*/
h2 {
	color: #000;
	font-size: 1.5rem;
	margin-bottom: 0;
	font-weight: bold;
	white-space: nowrap;
	padding-right: 0.5em;
}

h3 {
	font-size: 1.2rem;
}

/* Banner icons */
.banner-icons a {
	display: inline-block;
}

.flickity-slider {
	display: flex;
	align-items: center;
}

.banner-icon {
	padding: 0.5em 1em;
}

#banner-icons-wrapper {
	display: block;
	background: #ccc;
	padding: 0.5em 0;
}

.banner-icons {
	width: 60%;
	margin: 0 auto;
}

.flickity-prev-next-button.previous {
	left: -4em;
}

.flickity-slider:after {
	content: "";
	min-height: inherit;
	font-size: 0;
}

.flickity-prev-next-button {
	width: 30px;
	height: 30px;
}

.flickity-prev-next-button.next {
	right: -4em;
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
	.flickity-slider {
		align-items: flex-start;
		margin-top: 1em;
	}
}

@media (min-width: 768px) {
	.container {
		max-width: 1140px;
	}
}

@media (min-width: 200px) and (max-width: 768px) {
	.container {
		max-width: 100%;
		margin-top: 0;
		padding: 0;
	}

	.view-more {
		border: none;
	}

	.view-more.d-sm-block {
		text-align: center;
		padding: 0;
		font-size: 1.2em;
	}

	.view-more.d-sm-block a {
		padding: 0.5em;
		display: inline-block;
		margin: 0.5em 0;
	}

	h2 {
		padding-right: 0;
	}

	div[id$="-wrapper"] .header {
		align-items: center;
		padding: 1em 0;
	}
}

@media (min-width: 200px) and (max-width: 576px) {
	div[id$="-wrapper"] h2 {
		font-size: 1.3rem;
	}

	div[id$="-wrapper"] hr {
		display: none;
	}
}

@media (min-width: 576px) and (max-width: 1199px) {
	#right-column {
		align-items: flex-start;
		justify-content: space-around;
	}
}

/*News*/
h2 {
	color: #000;
	font-size: 1.5rem;
	margin-bottom: 0;
	font-weight: bold;
	white-space: nowrap;
	padding-right: 0.5em;
}

h3 {
	font-size: 1.2rem;
}

div[id$="-wrapper"] .header {
	padding: 0;
	display: flex;
	align-items: baseline;
	width: 100%;
}

div[id$="-wrapper"] .header hr {
	border-top: 0.2em solid #465696;
	width: inherit;
}

div[id$="-wrapper"] div {
	list-style: none;
}

div[id$="-wrapper"] .link-icon {
	width: 70%;
}

div[id$="-wrapper"] .feature-link {
	padding: 0;
	font-weight: bolder;
	color: #000;
}

div[id$="-items"] {
	height: 470px;
	overflow-y: scroll;
	box-shadow: none;
	border-bottom-left-radius: .3em;
	border-bottom-right-radius: .3em
}

div[id$="-items"] .news {
	padding: .5em .3em 1.5em;
	margin: 0 0 1em 0;
	box-shadow: none;
	border: 3px solid #000;
	box-shadow: 5px 5px #000;
}

/* News */
#news-wrapper h2 {
	color: #465696;
}

h3.news-title {
	padding-top: 0.5rem;
}

.view-more {
	white-space: nowrap;
	padding: 0 .5em;
	font-weight: bold;
	background: #ffffff;
	transition: ease-in-out .3s background-color;
	border: 1px solid #465696;
}

.view-more:hover {
	background: #465696;
}

.view-more a {
	color: #465696;
	transition: ease-in-out .3s color;
}

.view-more a:hover {
	color: #fff;
	text-decoration: none;
}

/* Important Message*/
#im-wrapper h2 {
	color: #dc3545;
}

#im-wrapper hr {
	border-color: #dc3545;
}

#im-wrapper .view-more {
	border-color: #dc3545;
}

#im-wrapper .view-more:hover {
	background: #dc3545;
}

#im-wrapper .view-more a {
	color: #dc3545;
}

#im-wrapper .view-more a:hover {
	color: #fff;
}

#im-items {
	scrollbar-width: none;
}
Option 2: Or upload your CSS file未選擇任何檔案
File encoding
UTF-8
Indentation level
Tab delimited
 
-Beautified CSS-
 
.section-header {
	display: none;
}

/* bottom container elements: News, featured, info*/
h2 {
	color: #000;
	font-size: 1.5rem;
	margin-bottom: 0;
	font-weight: bold;
	white-space: nowrap;
	padding-right: 0.5em;
}

h3 {
	font-size: 1.2rem;
}

/* Banner icons */
.banner-icons a {
	display: inline-block;
}

.flickity-slider {
	display: flex;
	align-items: center;
}

.banner-icon {
	padding: 0.5em 1em;
}

#banner-icons-wrapper {
	display: block;
	background: #ccc;
	padding: 0.5em 0;
}

.banner-icons {
	width: 60%;
	margin: 0 auto;
}

.flickity-prev-next-button.previous {
	left: -4em;
}

.flickity-slider:after {
	content: "";
	min-height: inherit;
	font-size: 0;
}

.flickity-prev-next-button {
	width: 30px;
	height: 30px;
}

.flickity-prev-next-button.next {
	right: -4em;
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
	.flickity-slider {
		align-items: flex-start;
		margin-top: 1em;
	}
}

@media (min-width: 768px) {
	.container {
		max-width: 1140px;
	}
}

@media (min-width: 200px) and (max-width: 768px) {
	.container {
		max-width: 100%;
		margin-top: 0;
		padding: 0;
	}

	.view-more {
		border: none;
	}

	.view-more.d-sm-block {
		text-align: center;
		padding: 0;
		font-size: 1.2em;
	}

	.view-more.d-sm-block a {
		padding: 0.5em;
		display: inline-block;
		margin: 0.5em 0;
	}

	h2 {
		padding-right: 0;
	}

	div[id$="-wrapper"] .header {
		align-items: center;
		padding: 1em 0;
	}
}

@media (min-width: 200px) and (max-width: 576px) {
	div[id$="-wrapper"] h2 {
		font-size: 1.3rem;
	}

	div[id$="-wrapper"] hr {
		display: none;
	}
}

@media (min-width: 576px) and (max-width: 1199px) {
	#right-column {
		align-items: flex-start;
		justify-content: space-around;
	}
}

/*News*/
h2 {
	color: #000;
	font-size: 1.5rem;
	margin-bottom: 0;
	font-weight: bold;
	white-space: nowrap;
	padding-right: 0.5em;
}

h3 {
	font-size: 1.2rem;
}

div[id$="-wrapper"] .header {
	padding: 0;
	display: flex;
	align-items: baseline;
	width: 100%;
}

div[id$="-wrapper"] .header hr {
	border-top: 0.2em solid #465696;
	width: inherit;
}

div[id$="-wrapper"] div {
	list-style: none;
}

div[id$="-wrapper"] .link-icon {
	width: 70%;
}

div[id$="-wrapper"] .feature-link {
	padding: 0;
	font-weight: bolder;
	color: #000;
}

div[id$="-items"] {
	height: 470px;
	overflow-y: scroll;
	box-shadow: none;
	border-bottom-left-radius: .3em;
	border-bottom-right-radius: .3em
}

div[id$="-items"] .news {
	padding: .5em .3em 1.5em;
	margin: 0 0 1em 0;
	box-shadow: none;
	border: 3px solid #000;
	box-shadow: 5px 5px #000;
}

/* News */
#news-wrapper h2 {
	color: #465696;
}

h3.news-title {
	padding-top: 0.5rem;
}

.view-more {
	white-space: nowrap;
	padding: 0 .5em;
	font-weight: bold;
	background: #ffffff;
	transition: ease-in-out .3s background-color;
	border: 1px solid #465696;
}

.view-more:hover {
	background: #465696;
}

.view-more a {
	color: #465696;
	transition: ease-in-out .3s color;
}

.view-more a:hover {
	color: #fff;
	text-decoration: none;
}

/* Important Message*/
#im-wrapper h2 {
	color: #dc3545;
}

#im-wrapper hr {
	border-color: #dc3545;
}

#im-wrapper .view-more {
	border-color: #dc3545;
}

#im-wrapper .view-more:hover {
	background: #dc3545;
}

#im-wrapper .view-more a {
	color: #dc3545;
}

#im-wrapper .view-more a:hover {
	color: #fff;
}

#im-items {
	scrollbar-width: none;
}
© FreeFormatter.com - FREEFORMATTER is a d/b/a of 10174785 Canada Inc. - Copyright Notice - Privacy Statement - Terms of Use - Contact