Bootstrap 3 responsive text size with media queries css + font style classes [1]

As an solution for snap:
Bootstrap 3
voted: 1
vote
css css3 bootstrap

Custom styles with responsive text with media queries. Desktop first queries 10 different settings and additional font weight and style classes.

/*
	
		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;
	}



}

/* font style */

	.font-bold {
		font-style: bold; 
	}

	.font-oblique {
		font-style: oblique;
	}

	.font-italic {
		font-style: italic;		
	}

	.font-normal{
		font-style: normal; 
	}

/* font decoration */

	.text-line-through {
		text-decoration: line-through;
	}

	.text-overline {
		text-decoration: overline;
	}

	.text-underline {
		text-decoration: underline;
	}

	.text-underline {		
		text-decoration: underline;	
	}
working url: not entered
version: bootstrap 3
Leave a Comment:
Characters left:
No comments yet.