Currently, I am working on developing a responsive website using Bootstrap. While the layout works well when resizing the window horizontally, there is an issue with vertical resizing. I do not want the height of the elements (such as Bootstrap columns, images, and divs) to change when the window is resized vertically. Despite searching for a solution, I have not found one yet. If anyone has suggestions on how to address this problem, please let me know!
Update: To provide a visual reference, I have included a couple of images demonstrating the undesired behavior.
Here is a snapshot of the section of the site in question before vertical resizing.
And here is the same section after vertical shrinkage, where the text spills out of the containing div. My goal is to maintain the height of the div during vertical shrinking while adjusting its width during horizontal resizing.
I'm relatively new to web development and posting questions online, so feel free to ask for more details if needed!
Update 2: Added snippet of my code below
body {
background-color: #f4f4f4;
color: #111111;
height: auto!important;
min-height: 100vh;
#home-content {
text-align: center;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0;
padding-top: 7.5vh;
}
.col-content {
background-color: #fdfdfd;
height: 40vh;
margin-bottom: 5vh;
margin-left: 1vw;
box-shadow: 1px 1px 3px #555555;
}
#intro-content {
padding: 5px 10px 5px 10px;
}
h2 {
font-size: 200%;
margin-top: 2vw;
margin-bottom: 1vw;
font-family: Perpetua;
text-align: center;
}
#intro-hr {
background-color: #444444;
height: 1px;
margin: -5px 0 5px 0;
}
#intro-text {
text-align: left;
margin-top: 1vw;
font-family: verdana;
font-size: 16px;
}<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=100px, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="css/styles2.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="home-content" class="container-fluid">
<div class="row">
<div id="intro" class="col-lg-6">
<div id="intro-content" class="col-content top left">
<h2> Title </h2>
<hr id="intro-hr">
<p id="intro-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras placerat molestie volutpat. Nam gravida tortor id tellus pulvinar sodales. Duis sodales sagittis ex, a ultricies lacus tempus vel. Maecenas lobortis venenatis sem. Nulla at odio vehicula, volutpat
quam eu, fermentum dolor.
</p>
</div>
</div>
<div id="contact" class="col-lg-6">
<div id="contact-content" class="col-content top">
</div>
</div>
</div>