Just recently, I began exploring the world of HTML/CSS/JS and created a handy tool for my personal use. However, I encountered an issue when viewing it on different resolutions which caused some elements to look distorted.
The tool I made allows me to input a band's name and genre, add it to a list, but the layout gets messed up when adding bands to the list. The text extends all the way to the right side of the screen, making the border appear as a tiny square.
In addition, I am looking to implement a feature where I can click on a band from the list to highlight it and have a remove button to delete it. But I'm not sure where to begin with this functionality.
Here is a snippet of the code:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel='stylesheet' href='stylesheet.css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h2>Bands I Like</h2>
<form name="checkListForm">
<input type="text" id = "Item" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>
<ol class = "Header">
<li>Band // Genre</li>
</ol>
<br/>
<ol class ="Bands">
</ol>
</body>
</html>
Any assistance or guidance on improving this would be highly appreciated!