Auto resize content to fit screen based on monitor resolution

Question

So i'm using bootstrap 4 with some cards and i've came across a problem.

I made a page that looks perfectly fine on 1920x1080 resolution, but when my friend who uses a 2560x1440 resolution loaded the same page, it looked a bit different.

The left is 1920x1080 and the right is 2560x1440. As you can see, the 2560x1440 resolution has a huge gap of space at the bottom. It should look exactly like the image on the left but auto resized to fit the page.

body {
  background-color: #5C67B6;
}

html {
  height: 100%;
  width: 100%
}

#footer {
  text-align: center;
  position: fixed;
  height: 50px;
  background: transparent;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin-bottom: 0px;
}

#clearfooter {
  height: 50px;
}

.card {
  margin: 0 auto;
  /* Added */
  float: none;
  /* Added */
  margin-bottom: 10px;
  /* Added */
}

.container {
  max-height: 1280px;
  max-width: 720px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<h2 style="text-align: center; color:#fff;"><strong>Premium Offers</strong></h2>
<h4 style="text-align: center; color:#fff;">Choose your Plan</h4>
<div class="container">
  <div class="card-deck">
    <div class="card" style="width: 20rem;">
      <div class="card-block">
        <h3 class="card-title">Turbo</h3>
        <p class="card-text">If Turbo isn't enough for you, <br> you can upgrade to Turbo Plus.<br>
          <br>If you want to <strong>ALWAYS</strong> be ahead of competing servers, this is for you.</p>
      </div>
      <div class="card-inverse" style="width: 20rem; border-color: #fff;">
        <ul class="list-group list-group-flush list-group">
          <li class="list-group-item">Highlighted Server!</li>
          <li class="list-group-item">Always visible!</li>
          <li class="list-group-item">Special Support</li>
          <li class="list-group-item">Turbo Plus role on our server</li>
          <li class="list-group-item">Turbo Plus Badge</li>
          <a href="#" class="list-group-item active" style="text-align: center;">Buy Turbo Plus</a>
        </ul>
      </div>
    </div>
    <div class="card card-inverse" style="background-color: #333; border-color: #333; width: 20rem;">
      <div class="card-block">
        <h3 class="card-title">Turbo Plus</h3>
        <p class="card-text">If Turbo isn't enough for you, <br> you can upgrade to Turbo Plus.<br>
          <br>If you want to <strong>ALWAYS</strong> be ahead of competing servers, this is for you.</p>
      </div>
      <div class="card-inverse" style="width: 20rem; border-color: #333;">
        <ul class="list-group list-group-flush list-group">
          <li class="list-group-item">Highlighted Server!</li>
          <li class="list-group-item">Always visible!</li>
          <li class="list-group-item">Special Support</li>
          <li class="list-group-item">Turbo Plus role on our server</li>
          <li class="list-group-item">Turbo Plus Badge</li>
          <a href="#" class="list-group-item active" style="text-align: center;">Buy Turbo Plus</a>
        </ul>
      </div>
    </div>
  </div>
</div>

I've tried looking for some answers with similar problems but with no avail. Would appreciate some help with this. Been working on this for 7-9 hours.

Answer 1

I think the best way to handle this would be to use the VW and VH properties, or convert every height parameter to percentages so that everything (even the fonts) resize, when changing the scale of the window. If you do proceed with adding even height in percentages then make sure to have the body and all the underlaying children set with a specific height.

For example setting everything on a percentage in height will result into the following: https://jsfiddle.net/y1kbz5r0/2/ (further edits to the height and what not is required).

Alternatively you could also work with media queries to enlarge certain sizes everything above 1080px in height, like:

@media screen and (min-height:1080px){
    //CSS code here
}

Edit: Further changes to the MediaQuery and with usage of VH can be seen here: https://jsfiddle.net/y1kbz5r0/4/

I hope this will provide you with enough information to proceed with this. If not feel free to ask for further information.

Edit: Worked out version as per your requirements:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<style type="text/css">
html,body{
	height:100%;
	width:100%
}
body{
	background-color:#5C67B6;
	margin:auto;
	position:relative;
	padding-top:10%;
}
header{
	margin:auto;
	padding:2vh 0;
	text-align:center;
	color:#fff;
}
.container{
	margin:auto;
	height:70%;
}
.card-deck{
	margin:auto;
}
.card{
	margin:1rem;
	min-width:20rem!important;
	width:30vw;
	font-size:1.2em
}
.card-inverse{
	background-color:#333; 
	border-color:#333;
}
.buybutton{text-align:center!important}
@media screen and (min-height:1000px){
	body{
		font-size:1.7vh
	}
	h2{font-size:3vh}
	h3{font-size:2.6vh}
	h4{font-size:2.2vh}
	.card,.card-inverse{
		width:33vw!important;
	}
	.container{
		display:flex;
		height:auto;
		width:100%;
		margin:auto;
		align-items:center;
		justify-content:center;
	}
	.card-block{
		padding:1.6vh;
	}
	.card-deck{
		border-spacing:1.75vh 0;
	}
	.list-group-item{
		padding:1vh 1.65vh;
	}
}
</style>
</head>
<body>
	<header>
		<h2>Premium Offers</h2>
		<h4>Choose your Plan</h4>
	</header>
<!--Container-->
	<div class="container">
		<div class="card-deck">
			<!--Card One-->
			<div class="card">
				<div class="card-block">
					<h3 class="card-title">Turbo</h3>
					<p class="card-text">If Turbo isn't enough for you,
						<br> you can upgrade to Turbo Plus.
						<br>
						<br>If you want to <strong>ALWAYS</strong> be ahead of competing servers, this is for you.</p>
				</div>
				<div class="card-inverse">
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Highlighted Server!</li>
						<li class="list-group-item">Always visible!</li>
						<li class="list-group-item">Special Support</li>
						<li class="list-group-item">Turbo Plus role on our server</li>
						<li class="list-group-item">Turbo Plus Badge</li>
						<a href="#" class="list-group-item active buybutton">Buy Turbo Plus</a>
					</ul>
				</div>
			</div>
			<!--Card Two-->
			<div class="card card-inverse">
				<div class="card-block">
					<h3 class="card-title">Turbo Plus</h3>
					<p class="card-text">If Turbo isn't enough for you,
						<br> you can upgrade to Turbo Plus.
						<br>
						<br>If you want to <strong>ALWAYS</strong> be ahead of competing servers, this is for you.</p>
				</div>
				<div class="card-inverse">
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Highlighted Server!</li>
						<li class="list-group-item">Always visible!</li>
						<li class="list-group-item">Special Support</li>
						<li class="list-group-item">Turbo Plus role on our server</li>
						<li class="list-group-item">Turbo Plus Badge</li>
						<a href="#" class="list-group-item active buybutton">Buy Turbo Plus</a>
					</ul>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Padding and margin tweaks might need to be changed further on to your liking, but I do think with this code, your question is pretty much answered.