Currently, this is my code snippet. My goal is to make it drop below my logo on the left side as the screen size decreases. Thank you in advance for any suggestions!
@media screen and (max-width:959px){
#wrapper{
width: 100%;
}
#Search{
width:40em;
height: 3em;
}
}
@media screen and (max-width:640px)
{
#Search{
width:100%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Shiny Science</title>
<link rel="stylesheet" type="text/css" href="css.css">
<script src="js.js"></script>
<meta charset="utf-8">
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<header>
<img id="mainLogo" src="images/mainlogo.jpg">
<select id="Select">
<option value="0">Menu</option>
<option value="1">Home</option>
<option value="2">Contact Us</option>
<option value="3">About Us</option>
</select>
</header>
<main>
<h1>Shiny Science</h1>
<p id="description">Metusque innabilis, aestu manebat cum cuncta grandia sectamque iuga recessit cuncta. Metusque innabilis, aestu manebat cum cuncta grandia sectamque iuga recessit cuncta</p>
<div id="searchbox">
<img src="images/monkey.jpg" id="secondaryLogo" alt="logo maybe">
<input type="text" name="txtSearch" placeholder="Topic Name" id="Search" ><input type="button" name="btnSearch" value="Search" id="searchButton">
<img src="images/turtle.png" alt="somethingkidscience" id="secondaryLogo2">
</div>
</main>
<footer>
<div id="ep1">
<h2>Episode 1</h2>
<p class="caption">Metusque innabilis, aestu manebat cum cuncta grandia sectamque iuga recessit cuncta</p>
<iframe src="https://www.youtube.com/watch?v=W3s7UWpo35s?autoplay=1"><p>Your browser doesn't support iframe</p></iframe>
</div>
<div id="ep2">
<h2>Episode 2</h2>
<p class="caption">Metusque innabilis, aestu manebat cum cuncta grandia sectamque iuga recessit cuncta</p>
<iframe src="https://www.youtube.com/watch?v=W3s7UWpo35s"><p>Your browser doesn't support iframe</p></iframe>
</div><br>
<a href="http://www.youtube.com">View all episodes</a>
</footer>
</div>
</body>
</html>
Apologies for any confusion, here are the HTML and CSS components I am currently utilizing.
//CSS Styles
body{
font-family: Arial, Verdana, sans-serif;
font-size: 1.3em;
background: linear-gradient(red, yellow) repeat;
text-align: center;
color: #fff;
}
header{
display: flex;
justify-content: space-around;
flex-wrap: nowrap;
align-items: center;
padding-top: 1em;
}
main,footer,header{
border-bottom: 2px solid red;
padding-bottom: 2em;
text-align: center;
}
caption{
font-size: 0.5em;
}
#ep1, #ep2{
display: inline-block;
margin-left: 5em;
margin-right: 5em;
}
wrapper{
margin: auto;
width: 80%;
background: linear-gradient(cyan,red);
}
secondaryLogo{
width: 15%;
}
searchbox{
display: flex;
justify-content: space-around;
flex-wrap: nowrap;
align-items: center;
}
Search{
width:40em;
height: 3em;
}
contactHeader{
padding-top: 1em;
display: flex;
justify-content: center;
flex-wrap: nowrap;
align-items: center;
margin-bottom: 2em;
overflow:auto;
}
h1, description{
margin: auto;
width: 80%;
}
input[type=text], textarea{
width:50%;
float: left;
}
input[type=submit]{
}
searchButton{
height: 3em;
}
mainLogo{
width: 30%;
margin-left: 25%;
}
secondaryLogo2{
float: right;
width: 15%;
}
us{
width: 10%;
}
label{
float: left;
text-align: right;
width: 35%;
margin-right: 5%;
}
select{
font-size: 1em;
text-align: center;
}
contactForm{
width: 49%;
border-right: 2px solid white;
float: left;
height: 30%;
}
contactMethod{
float: left;
text-align: left;
padding-left: 3em;
}
@media screen and (max-width:959px){
wrapper{
width: 100%;
}
Search{
width:40em;
height: 3em;
}
}
media screen and (max-width:640px)
{
Search{
width:100%;
height:150px;
float:left;
}
img {
width: 100%;
max-width: 400px;
height: auto;
}
I have been experimenting with various queries, but currently, only the changes to the wrapper are effective when reducing the screen size.