After diving into learning bootstrap, I decided to create a basic webpage summarizing F1 races. But alas, my layout got awfully mixed up! The image of the race driver and the text with the fastest lap driver's name are spilling out of their respective divs upon browser resize. If someone could help me pinpoint where I slipped up, I'd greatly appreciate it because my attempts at fixing it have been futile so far. Take a peek at these screenshots:
Here's a snippet of the HTML:
<head>
<title>Critical F1 Events</title>
<meta charset="utf-8"/>
<!-- More meta tags here -->
<script src="../../raphael-2.1.4.min.js"></script>
<script src="../../justgage.js"></script>
<!-- JavaScript code snippets -->
<link rel="stylesheet" href="../../css/bootstrap.min.css" type="text/css"/>
<!-- Additional stylesheet links -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="../../js/bootstrap.min.js"></script>Some CSS styling bits:
@font-face{
font-family: Formula1;
src: url('Formula1-Regular.ttf');
}
/* Other font styles */
body{
font-family: Formula1, sans-serif;
color: black;
}
/* Header styles */
.header h1{
text-align: center;
font-weight: bold;
margin-top: 25px;
font-size: 50px;
}
/* Specific classes styling like .next_prev, .footer, .banner_sub */
.gauge{
width: 100%;
height: 100%;
margin-top: -70px;
}
#fastest_lap{
color: purple;
font-size: 40px;
margin-bottom: 0;
font-weight: bold;
}