I'm struggling to make this website fully responsive and adapt to various screen resolutions. The background images I'm using are high-resolution, but they don't seem to cover the entire page.
CSS :
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
.bg {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
color: #FFFFFF;
padding: 9px 90px;
font-family: 'Karma', serif;
}
.col {
padding-left:0px;
padding-right: 0px;
}
.container-fluid {
padding-left: 0px;
padding-right: 0px;
}
.bg-left {
height: 100%;
width:100%;
background-size:cover;
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url(https://trello-attachments.s3.amazonaws.com/5e555166a4c1786edb33758a/5e710c0ee0447d546d31664b/c01b769110cdb1569938e31df65c24d4/electric-car-1458836.jpg)
}
.bg-right {
background-color: #5547A3;
height: 100vh;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
HTML :
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Karma&display=swap');
</style>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-8 col-lg-8">
<div class="bg bg-left">
<h2></h2>
</div>
</div>
<div class="col-xs-12 col-md-4 col-lg-4">
<div class="bg bg-right">
<h1 style="text-align:center;font-weight:bold">Membership Tiers</h1>
<h2 style="text-align:center">____________________________________</h2>
<h2 style="text-align:center">Free</h2>
<h5 style="text-align:center">Tier gets access to email updates, and basic pay-to-use charging functions.</h5>
<h2 style="text-align:center">____________________________________</h2>
<h2
style="text-align:center">Preferred</h2>
<h5 style="text-align:center">Tier gets all above, and bump in priority over free. Continous use with no financial obligation.</h5>
<h2 style="text-align:center">____________________________________</h2>
<h2
style="text-align:center">Hero</h2>
<h5 style="text-align:center">Tier gets all above, and bump(s) in priority over free and preferred. Basic level membership, monly/yearly payment plan that allows access to 10+ classes per month, 10 charges per month.</h5>
<h2 style="text-align:center">____________________________________</h2>
<h2
style="text-align:center">Superhero</h2>
<h5 style="text-align:center">Tier is eligible for weeklyu discounts, and premier services at the center. Unlimited class access, unlimited charges per month, and complimentary evennt tickets. Charges about $50 USD per month.</h5>
<h2 style="text-align:center">____________________________________</h2>
</div>
</div>
</div>
</div>