- Define body globals - Adds a new breakpoint for narrow desktops - Optimizes font size for phones and tablets

common-bootstrap-custom.css

/* -----------------------------------------------
    Globals
----------------------------------------------- */

html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}

body {
    position: relative;
    -webkit-font-smoothing: antialiased;
	background: #101010;
}

/* -----------------------------------------------
    Extra hidden/visible classes
----------------------------------------------- */

.visible-narrow-desktop {
  display: none !important;
}

@media (min-width: 980px) and (max-width: 1199px) {
  .visible-narrow-desktop {
    display: inherit !important;
  }
  .hidden-narrow-desktop {
    display: none !important;
  }
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .hidden-narrow-desktop {
    display: inherit !important;
  }
  .visible-narrow-desktop {
    display: none !important;
  }
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}

/* -----------------------------------------------
    Tablet & Phone font configurations
----------------------------------------------- */

@media (max-width: 767px)
{
	/* Shrinking the fonts on the phone */
	body {
		font-size: 75%;
	}	

	h1 {
		font-size: 31.5px;
	}

	h2 {
		font-size: 24.5px;
	}

	h3 {
		font-size: 17.5px;
	}
}

@media (min-width: 768px) and (max-width: 979px)
{
	/* Shrinking the fonts a little bit less on the tablet */
	body {
		font-size: 75%;
	}

	h1 {
		font-size: 31.5px;
	}

	h2 {
		font-size: 24.5px;
	}

	h3 {
		font-size: 17.5px;
	}
}