<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container bg-overlay"> <div class="row"> <div class="col-xs-12 px-5 mx-auto"> <h2 class="text-center boggle">Recieve discount codes and earn your school or club free sports equipment </h2> </div> </div> </div>

.bg-overlay { background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)), url("images/Beach-Banner.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; color: #fff; } .boggle{ padding: 15%; padding-bottom: 30%; max-height: 450px; } @media screen and (min-width: 992px) { .boggle { font-size: 2rem; } } @media screen and (min-width: 777px) and (max-width:991px) { .boggle { font-size: 1.5rem; } } @media screen and (min-width: 0px) and (max-width:767px) { .boggle { font-size: 1rem; } }