Take a look at my code:
https://jsfiddle.net/r62p4209/
I created a search bar with company brand name and some buttons on the right, positioned in the center.
My aim is for the search bar (from "search by:" to the "Go!" button) to move onto the next line when the screen width is reduced to 786px. However, my code doesn't seem to be working as expected. Can you help me identify the issue?
Your assistance is greatly appreciated!
Here's the HTML snippet:
<!DOCTYPE html>
<html>
<head>
<title>test5</title>
<link rel="stylesheet" type="text/css" href="test5.css">
</head>
<body>
<div class="center">
<div class="qwert" id="abc1">
<a id="Home" href="www.bookavanue.com"><b>Brand</b></a>
</div>
<div class="qwert" id="abc3">
<button id="Register" type="button">Register</button>
<button id="Login" type="button">Log In</button>
<button id="Cart" type="button">Cart</button>
</div>
<div class="qwert" id="abc2">
<div id="abcd1">
<label for="Search">Search by:</label>
<select value="Title">
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
<select value="All Books">
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
</div>
<div id="abcd2">
<input id="Search" type="text" name="Search your book"
placeholder="Search Your Books...">
</div>
<div id="abcd3">
<button id="Go" type="Search">Go!</button>
</div>
</div>
</div>
</body>
</html>
CSS details:
#abc1{
float: left;
width: 110px;
}
#abc3{
float: right;
width: 185px;
text-align: right;
}
#abc2{
display: block;
width: auto;
}
#abcd1{
float: left;
width: 220px;
}
#abcd3{
float: right;
width: 40px;
text-align: right;
}
#abcd2{
width: calc(100% - 270px);
display: inline-block;
}
input{
width: 100%;
}
@media screen and (min-width: 786px){
#abc2{
width: calc(100% - 295px);
display: inline-block;
}
}