Help needed with adjusting the horizontal line tag on a webpage created using HTML, CSS, and Bootstrap. The issue arises when the window size changes to extra small.
Initially, the hr tag was set to 400px, which looked great on full-screen view. However, it appeared distorted on mobile screens below 500px. Adjusting the width to 90% fixed the issue for extra small screens but caused horizontal stretching on screens above that size.
body {
color: white;
font-family: Lato;
background: url(purrfectimage.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
#content {
text-align: center;
padding-top: 25%;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}
hr {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
h1 {
font-weight: 700;
font-size: 5em;
}
html {
height: 100%;
width: 100%;
}
.custom-toggler.navbar-toggler {
border-color: rgb(255, 255, 255);
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no;">
<title>Purrfect Match</title>
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="purr.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1>Purrfect Match</h1>
<h3>The Only Human-Feline Dating App</h3>
<hr>
<button type="button" class="btn btn-light btn-lg"><i class="fa fa-paw" aria-hidden="true"></i> Get Started!</button>
</div>
</div>
</div>
</div>
</body>
</html>Looking to maintain consistent appearance of the horizontal line across different window sizes without stretching horizontally.