Bootstrap 3 responsive text with media queries css

Bootstrap 3
voted: 0
vote
css css3 bootstrap

Custom styles with responsive text with media queries. Desktop first queries 10 different settings.

/*
	
		TEXT (responsive with media queries)
		
	*/
	
	
	
/* Large desktops and laptops */
@media (min-width: 1200px) {

	.textHuge {
		font-size: 110px;
		line-height: normal;
	}
	.textxxLarge {
		font-size: 60px;
		line-height: normal;
	}
	.textxLarge {
		font-size: 40px;
		line-height: normal;
	}
	.textLarge {
		font-size: 36px;
		line-height: normal;
	}
	.textxxMedium {
		font-size: 26px;
		line-height: normal;
	}
	.textxMedium {
		font-size: 18px;
		line-height: normal;
	}
	.textMedium {
		font-size: 16px;
		line-height: normal;
	}
	.textRegular {
		font-size: 14px;
		line-height: normal;
	}
	.textSmall {
		font-size: 11px;
		line-height: normal;
	}
	.textMini {
		font-size: 9px;
		line-height: normal;
	}

}

/* Portrait tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

	.textHuge {
		font-size: 77px;
		line-height: normal;
	}
	.textxxLarge {
		font-size: 42px;
		line-height: normal;
	}
	.textxLarge {
		font-size: 28px;
		line-height: normal;
	}
	.textLarge {
		font-size: 26px;
		line-height: normal;
	}
	.textxxMedium {
		font-size: 18px;
		line-height: normal;
	}
	.textxMedium {
		font-size: 16px;
		line-height: normal;
	}
	.textMedium {
		font-size: 14px;
		line-height: normal;
	}
	.textRegular {
		font-size: 12px;
		line-height: normal;
	}
	.textSmall {
		font-size: 11px;
		line-height: normal;
	}
	.textMini {
		font-size: 9px;
		line-height: normal;
	}

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

	.textHuge {
		font-size: 54px;
		line-height: normal;
	}
	.textxxLarge {
		font-size: 30px;
		line-height: normal;
	}
	.textxLarge {
		font-size: 22px;
		line-height: normal;
	}
	.textLarge {
		font-size: 18px;
		line-height: normal;
	}
	.textxxMedium {
		font-size: 16px;
		line-height: normal;
	}
	.textxMedium {
		font-size: 14px;
		line-height: normal;
	}
	.textMedium {
		font-size: 12px;
		line-height: normal;
	}
	.textRegular {
		font-size: 12px;
		line-height: normal;
	}
	.textSmall {
		font-size: 11px;
		line-height: normal;
	}
	.textMini {
		font-size: 9px;
		line-height: normal;
	}

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

	.textHuge {
		font-size: 38px;
		line-height: normal;
	}
	.textxxLarge {
		font-size: 24px;
		line-height: normal;
	}
	.textxLarge {
		font-size: 22px;
		line-height: normal;
	}
	.textLarge {
		font-size: 18px;
		line-height: normal;
	}
	.textxxMedium {
		font-size: 16px;
		line-height: normal;
	}
	.textxMedium {
		font-size: 14px;
		line-height: normal;
	}
	.textMedium {
		font-size: 12px;
		line-height: normal;
	}
	.textRegular {
		font-size: 12px;
		line-height: normal;
	}
	.textSmall {
		font-size: 11px;
		line-height: normal;
	}
	.textMini {
		font-size: 9px;
		line-height: normal;
	}

}

/* Landscape phones and smaller */
@media (max-width: 480px) {



	.textHuge {
		font-size: 32px;
		line-height: normal;
	}
	.textxxLarge {
		font-size: 22px;
		line-height: normal;
	}
	.textxLarge {
		font-size: 20px;
		line-height: normal;
	}
	.textLarge {
		font-size: 16px;
		line-height: normal;
	}
	.textxxMedium {
		font-size: 14px;
		line-height: normal;
	}
	.textxMedium {
		font-size: 13px;
		line-height: normal;
	}
	.textMedium {
		font-size: 11px;
		line-height: normal;
	}
	.textRegular {
		font-size: 10px;
		line-height: normal;
	}
	.textSmall {
		font-size: 9px;
		line-height: normal;
	}
	.textMini {
		font-size: 8px;
		line-height: normal;
	}



}
working url: not entered
version: bootstrap 3

Leave a Comment:
Characters left:
No comments yet.