Working on a Bootstrap 4 website with three images inside a .row div, I encountered an issue. To ensure all images have the same height, I created a custom class setting height: 20% and width: auto. Though the images display as desired, there is extra spacing added beneath each image, creating a large gap between the image section and the following one. Any tips on avoiding this gap? Here's a fiddle showcasing the problem https://jsfiddle.net/wxg51v5x/ (Comment out the images for comparison). Thank you!
EDIT: Included the code itself.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Illicit Mind Inc. - Programs</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no" />
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/font-awesome.min.css" />
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<!-- Navbar -->
...
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/scripts.js"></script>
</body>
</html>
CSS:
@font-face {
font-family: 'Futura Book';
src: url('./fonts/futura-book-webfont.woff2') format('woff2'),
url('./fonts/futura-book-webfont.woff') format('woff');
font-style: normal;
}
@font-face {
font-family: 'Futura Heavy';
src: url('./fonts/futura-heavy-webfont.woff2') format('woff2'),
url('./fonts/futura-heavy-webfont.woff') format('woff');
font-style: bold;
}
* {font-family: 'Futura Book', Arial, sans-serif}
...
#programs {background-image: linear-gradient(to top, #4191B4 5%, white 100%)}
#formula {background-image: linear-gradient(to top, white 0%, #4191B4 95%)}