While working on the email client sidebar, I encountered an issue where the content in the main body area would wrap incorrectly when the screen size decreased. I'm struggling to identify what's causing this behavior.
body {
background-color: WhiteSmoke;
}
nav {
// border: solid 1px blue;
// background-color: WhiteSmoke;
}
ul {
list-style-type: none;
// background-color: yellow;
}
div.container {
// background-color: blue;
}
span {
// background-color: purple;
}
li {
// background-color: lightblue;
}
ul>div>li span.fa-caret-right {
color: green;
}
ul>div>li span.fa-flushed {
color: green;
}
ul>div>li span.fa-trash {
color: green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<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" href="https://fonts.googleapis.com/css?family=Muli">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="./sidebar.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav class="w-350">
<div class="row align-items-center">
<img class="img-fluid col-3" src="http://pngimg.com/uploads/php/php_PNG44.png">
<div class="row">
<span class="col-8">Firstname Last</span>
<p class="col-8"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2aca3afa782a7afa3abaeeca1adaf">[email protected]</a></p>
</div>
</div>
<ul>
<div>
<button type="button" class="col-9 btn btn-primary">Compose</button>
<li><span class="col-1 fas fa-caret-right p-3"></span><a class="col-11" href="#">Inbox</a></li>
<li><span class="col-1 fas fa-caret-right p-3"></span><a class="col-11" href="#">drafts</a></li>
<li><span class="col-1 fas fa-caret-right p-3"></span><a class="col-11" href="#">sent</a></li>
<li><span class="col-1 fas fa-flushed p-3"></span><a class="col-11" href="#">spam</a></li>
<li><span class="col-1 fas fa-trash p-3"></span><a class="col-11" href="#">trash</a></li>
</div>
</ul>
</nav>
<input type="text" class="col-8 form-control" placeholder="Search">
<span class="fas fa-caret-left"></span>
<span class="fas fa-backward"></span>
<span class="fas fa-caret-right"></span>
<span class="fas fa-times"></span>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 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>
</body>
</html>I've commented out a lot of CSS during trial and error, but once the template for the client works correctly, all unnecessary code will be removed. Most styling is currently nonfunctional due to changes made in the HTML, yet the CSS file is still included.