html - 如何让我的搜索栏在 html 中变大？

Question

几天以来我一直在编码，我仍然是初学者。我能够创建一个搜索栏，但是当我尝试更改搜索栏的宽度时，我的 html 文件不受影响。我尝试了几件事，但我找不到解决该问题的方法。但是，在我修改 Css 后，搜索栏输入“提交”会改变大小。我不知道为什么 searchbar-wrapper 没有响应。

/*essentials css */
body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 1.43;
    color: #484848;
    max-width: 100%;
    overflow-x: hidden;
}
p {
    font-size: 16px;
    margin: 0;
    padding: 0;
}
a:link {
    font-size: 16px;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
h1,h2,h3,h4,h5,h6,ul,ol,li{
    margin: 0;
    padding: 0;
}
ul,ol{
    list-style-type;
}
::selection {
    color: #fff;
    background-color: #333;
}
::-moz-selection {
    color: #fff;
    background-color: #333;
}


/*-----------Top-Nav-------- */
.top-nav {
	position: fixed;
	width: 100%;
	border-bottom: 1px solid #c9c9c9;
	float: left;
	display: block;
	height: 95px;
	background: #fff;
	z-index: 99999999999;
}
.top-nav .logo{
	width: 100%;
    float: left;
    display: block;
    height: 95px;
    border-right: 1px solid #e9e9e9;
}
.top-nav .logo img {
	width: 100%;
	padding: 14px 0;
	transition: all .9s;
	-webkit-filter: grayscale(0%);
}
.top-nav .logo a:hover img {
    -webkit-filter: grayscale(100%);
}


/*-----------Top-Nav-Search-------- */
.top-nav .search-container {
    float: left;
    width:100%;
    display:block;
    padding:22px 0;
}
.top-nav form{
    position:relative;
    display:block;
}
.top-nav input[type="text"] {
	width: 100%;
	background: #fff;
	padding: 10px 12px;
	border: 1px solid #e1e1e1;
	border-right: none;
	color: #888;
	font-size: 14px;
    height:42px;
}
.top-nav .search-container button {
	float: right;
	padding: 8px 15px;
	background: orange;
	font-size: 17px;
	height: 42px;
	border: none;
	cursor: pointer;
	position: absolute;
	right: 0;
	color: #fff;
}
.top-nav .search-container button:hover {
  background: #ccc;
}



/*-----------Top-Nav-Navigation-------- */
.navigation{
	width: auto;
	float: right;
	display: block;
}
.top-nav ul {
	float: right;
	padding: 35px 0;
	margin: 0;
	width: auto;
	display: block;
}
.top-nav ul li {
	list-style: none;
	margin: 0 34px;
	display: inline-block;
}
.top-nav ul li a {
	color: #777;
	font-size: 16px;
	font-weight: 400;
	text-transform: capitalize;
	letter-spacing: .5px;
    transition: all .9s;
}
.top-nav ul li a:hover {
	color: orange;
}



/*-----------Slideshow----------- */
.slideshow-container {
    width: 100%;
    position: relative;
    margin: auto;
    float: left;
    display: block;
    margin-top: 94px;
}
.slideshow-container .slider-text{
    width:100%;
    float:left;
    display:block;
    background:#008080;
    height:510px;
}

.slideshow-container .slider-text h1 {
	color: #fff;
	font-weight: 400;
	text-align: center;
	width: 100%;
	display: block;
	font-size: 35px;
	font-weight: 600;
	position: absolute;
	top: 30%;
}
.slideshow-container .slider-text p {
	color: #fff;
	font-size: 17px;
	text-align: center;
	width: 100%;
	display: block;
	font-weight: 400;
	letter-spacing: 0.5px;
	position: absolute;
	top: 50%;
}
.slideshow-container .prev, .slideshow-container .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 11px 18px;
	margin-top: -22px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 48px;
	height: 48px;
	width: 48px;
	background: rgba(0,0,0, 0.4);
}
.slideshow-container .next{
    right: 16px;
}
.slideshow-container .prev{
    left: 16px;
}
.slideshow-container .prev:hover, .slideshow-container .next:hover {
    background-color: rgba(0,0,0,1);
    text-decoration:none;
}


/*-----------Slideshow-dot----------- */
.dot-area{
    width:100%;
    float:left;
    display:block;
    padding:20px 0;
    background:orange;
}
.dot-area .dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 5px;
	background-color: #f9f9f9;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.dot-area .active, .dot-area .dot:hover {
    background-color: #008080;
}
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}
@keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}


/*-----------your-name----------- */
.your-area{
    width:100%;
    float:left;
    display:block;
    background:#003333;
}
.your-area h1{
    padding:100px 0;
    font-size:34px;
    color:#fff;
    text-align: center;
    font-weight:600;
}
.your-area h1 span{
    font-size:42px;
    text-transform:uppercase;
}
/* motto */

.row{
position: : relation;
max-width: 970px;
height: :auto;
margin:0 auto;

}
@media all and (max-width:1000px){
.row{
padding: 0 15px;
box-sizing: :border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}

}
#moto {
font-size: 48px;
font-weight: 300;
color:#484848;
padding: 60px 30px 10px;
letter-spacing: 0.8px;
}
#moto span{
  color:#FFA500 !important;
  font-weight: 700;
}

/* Searchbar CSS */

#searchbar-wrapper{
position:relative;
width: 100%;
height:auto;
margin-left: 30px;
}

 #searchbar{
position:relative;
width: 100%;
height:auto;
}

#searchbar input{
font-size: 19px;
outline: none;

}
#searchbar input [type="text"]{
    padding:30px 15px;
    width: 770px;
    display: inline-block;
    border: 1px solid #ccc;

}
#searchbar input[type="text"]:focus{
padding:19px 15px 17px;
border-bottom: 3px solid #FFA500;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition: all 0.3s ease;

}

#searchbar input[type="submit"]{
      width:200px;
      display: inline-block;
      padding: 10px 0;
      border: none;
      color: #fff;
      background-color: #FFA500;
      cursor: pointer;
      transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease;
      -moz-transition:all 0.3s ease;
      -o-transition: all 0.3s ease;
      border-top-right-radius: 3px;
      -moz-border-top-right-radius:3px;
      border-bottom-right-radius: 3px;
      -webkit-border-bottom-right-radius: 3px;
      -moz-border-bottom-right-radius: 3px;
}

#searchbar input[type="submit"]:hover{
  background-color: #FFA500;
}
/*:::::::::::::::::Responsive Media Query:::::::::::::::::::*/

@media only screen and (max-width:1279px){
.top-nav ul li {
	margin: 0 20px;
}
}
@media only screen and (max-width:1023px){

}
@media only screen and (max-width:979px){
.top-nav {
	height: 70px;
}
.top-nav .logo {
	height: 70px;
}
.top-nav .search-container {
	padding: 13px 0;
}
.top-nav ul li a {
	font-size: 14px;
	letter-spacing: 0;
}
.top-nav ul {
	padding: 24px 0;
}
.slideshow-container {
	margin-top: 68px;
}
.slideshow-container .slider-text h1 {
	width: 560px;
	font-size: 27px;
}
.slideshow-container .slider-text {
	height: 400px;
}
}
@media only screen and (max-width:899px){
.slideshow-container .slider-text p {
	max-width: 600px;
}
.top-nav ul li {
	margin: 0 15px;
}
.your-area h1 {
	font-size: 18px;
}
.your-area h1 span{
	font-size: 22px;
}
}
@media only screen and (max-width:799px){

}
@media only screen and (max-width:767px){
.top-nav {
	height: auto;
}
.top-nav .logo {
	height: auto;
    border:0;
}
.top-nav .logo img {
	width: 180px;
	margin: auto;
    display:block;
}
.top-nav .search-container {
	padding: 0;
}
.navigation {
	float: none;
	margin: auto;
}
.top-nav ul {
	float: none;
	padding: 12px 0;
	width: auto;
	display: table;
	margin: auto;
}
.top-nav input[type="text"] {
	height: 38px;
}
.top-nav .search-container button {
	height: 38px;
}
.slideshow-container {
	margin-top: 170px;
}
.slideshow-container .slider-text h1 {
	width: 100%;
	padding: 0 90px;
}
.slideshow-container .slider-text p {
	max-width: 100%;
	padding: 0 90px;
}
}
@media only screen and (max-width:639px){

}
@media only screen and (max-width:599px){
.slideshow-container .slider-text h1 {
	margin: 65px auto auto;
}
}
@media only screen and (max-width:479px){
.top-nav ul li {
	margin: 0 9px;
}
.slideshow-container .slider-text h1 {
	padding: 0 85px;
    font-size: 16px;
}
.slideshow-container .slider-text p {
	padding: 0 78px;
    font-size:12px;
}
.slideshow-container .slider-text {
	height: 350px;
}
.slideshow-container .slider-text h1 {
	margin: 100px auto auto;
}
.your-area h1 {
	font-size: 13px;
}
.your-area h1 span {
	font-size: 14px;
}
}
@media only screen and (max-width:359px){
.top-nav ul li {
	margin: 0 5px;
}
}

!DOCTYPE html>
<html>

<head>
    <title>ElephantRoom</title>
    <meta charset="utf-8" />
    <meta name"viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,500" />
    <link rel="stylesheet" type="text/css" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
    <link rel="stylesheet" type="text/css" href="main.css" />
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- Top-NAV HTML-->
    <section class="top-nav">
        <div class="col-md-2 col-sm-2 col-xs-12">
            <div class="logo">
                <a href="index.php"><img src="logo.png" alt="ElephantRoom"/></a>
            </div>
        </div>
        <div class="col-md-4 col-sm-4 col-xs-12">
            <div class="search-container">
                <form action="/action_page.php">
                    <input type="text" placeholder="Keywords.." name="search">
                    <button type="submit">Search</button>
                </form>
            </div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="navigation">
                <ul>
                    <li><a href="#">Become a Host</a></li>
                    <li><a href="#">Help</a></li>
                    <li><a href="#">Sign Up</a></li>
                    <li><a href="#">Log In</a></li>
                </ul>
            </div>
        </div>
    </section>
    <section class="slideshow-container">
        <div class="mySlides fade">
            <div class="slider-text">
                <img src="img/slider-image1.jpg"/>
                <h1> why book an expensive hotel when you can book a cheap apartment</h1>
                <p>Lorem ipsum dolor sit amet, consecteur adipiscing<br/>
                    elit. Donec venenatis bibendum nunc ut convallis. Suspendisse in nunc unterdum quam pellentesque.</p>
            </div>
        </div>
        <div class="mySlides fade">
            <div class="slider-text">
                    <img src="img/slider-image2.jpg"/>
                <h1>We have you covered anywhere you go in Africa</h1>
                <p>Lorem ipsum dolor sit amet, consecteur adipiscing<br/>
                elit. Donec venenatis bibendum nunc ut convallis. Suspendisse in nunc unterdum quam pellentesque.</p>
            </div>
        </div>
        <div class="mySlides fade">
            <div class="slider-text">
                <img src="img/slider-image3.jpg"/>
                <h1> We believe in a world with no frontier</h1>
                <p>Lorem ipsum dolor sit amet, consecteur adipiscing</p>
            </div>
        </div>
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </section>
    <br>
    <section class="dot-area" style="text-align:center">
        <span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
        <span class="dot" onclick="currentSlide(3)"></span>
    </section>

  <!-- Moto -->
    <div class="row">
        <h1 id="moto"><span>Are you ready?</span> Explore Africa<br /> on Elephant Room.</h1>
      </div>


      <!-- SEARCHBAR-->
      <div id="searchbar-wrapper">
      <div class="row">
        <form method="GET" action="index.html" ID="searchbar">
          <input type="text" name="destination" placeholder="Destination, city, address " />
          <input type="submit" name="search" value="Search" />

        </form>
      </div>
    </div>

    <!-- javascript import-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
  showSlides(slideIndex += n);
}
function currentSlide(n) {
  showSlides(slideIndex = n);
}
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>

在此处输入图像描述

标签： htmlcss

Answer 1

因为您使用的是 Bootstrap（我没有意识到），所以我首先建议升级到 Bootstrap 4.1.3。当 BS 从 3 到 4 时，几乎完全重写了库。新版本中有更多的输入选项。

除此之外，无论你选择 3 还是 4，你都可以做这样的事情......

  <!-- SEARCHBAR-->
  <div id="searchbar-wrapper">
    <div class="row">
      <form method="GET" action="index.html" ID="searchbar">
        <div class="col-sm-6 col-md-6 mb-2">
          <input type="text" name="destination" placeholder="Destination, city, address " />
        </div>
        <div class="col-sm-6 col-md-6">
          <input type="submit" name="search" value="Search" />
        </div>
      </form>
    </div>
  </div>

这是一个Codepen示例

这是一个片段

/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto');

html, body {
  height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 1.43;
    color: #484848;
    max-width: 100%;
    overflow-x: hidden;
}
p {
    font-size: 16px;
    margin: 0;
    padding: 0;
}
a:link {
    font-size: 16px;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
h1,h2,h3,h4,h5,h6,ul,ol,li{
    margin: 0;
    padding: 0;
}
ul,ol{
    list-style-type;
}
::selection {
    color: #fff;
    background-color: #333;
}
::-moz-selection {
    color: #fff;
    background-color: #333;
}

.mb-2 {
  margin-bottom: 1rem!important;
}


/*-----------Top-Nav-------- */
.top-nav {
	position: fixed;
	width: 100%;
	border-bottom: 1px solid #c9c9c9;
	float: left;
	display: block;
	height: 95px;
	background: #fff;
	z-index: 99999999999;
}
.top-nav .logo{
	width: 100%;
    float: left;
    display: block;
    height: 95px;
    border-right: 1px solid #e9e9e9;
}
.top-nav .logo img {
	width: 100%;
	padding: 14px 0;
	transition: all .9s;
	-webkit-filter: grayscale(0%);
}
.top-nav .logo a:hover img {
    -webkit-filter: grayscale(100%);
}


/*-----------Top-Nav-Search-------- */
.top-nav .search-container {
    float: left;
    width:100%;
    display:block;
    padding:22px 0;
}
.top-nav form{
    position:relative;
    display:block;
}
.top-nav input[type="text"] {
	width: 100%;
	background: #fff;
	padding: 10px 12px;
	border: 1px solid #e1e1e1;
	border-right: none;
	color: #888;
	font-size: 14px;
    height:42px;
}
.top-nav .search-container button {
	float: right;
	padding: 8px 15px;
	background: orange;
	font-size: 17px;
	height: 42px;
	border: none;
	cursor: pointer;
	position: absolute;
	right: 0;
	color: #fff;
}
.top-nav .search-container button:hover {
  background: #ccc;
}



/*-----------Top-Nav-Navigation-------- */
.navigation{
	width: auto;
	float: right;
	display: block;
}
.top-nav ul {
	float: right;
	padding: 35px 0;
	margin: 0;
	width: auto;
	display: block;
}
.top-nav ul li {
	list-style: none;
	margin: 0 34px;
	display: inline-block;
}
.top-nav ul li a {
	color: #777;
	font-size: 16px;
	font-weight: 400;
	text-transform: capitalize;
	letter-spacing: .5px;
    transition: all .9s;
}
.top-nav ul li a:hover {
	color: orange;
}



/*-----------Slideshow----------- */
.slideshow-container {
    width: 100%;
    position: relative;
    margin: auto;
    float: left;
    display: block;
    margin-top: 94px;
}
.slideshow-container .slider-text{
    width:100%;
    float:left;
    display:block;
    background:#008080;
    height:510px;
}

.slideshow-container .slider-text h1 {
	color: #fff;
	font-weight: 400;
	text-align: center;
	width: 100%;
	display: block;
	font-size: 35px;
	font-weight: 600;
	position: absolute;
	top: 30%;
}
.slideshow-container .slider-text p {
	color: #fff;
	font-size: 17px;
	text-align: center;
	width: 100%;
	display: block;
	font-weight: 400;
	letter-spacing: 0.5px;
	position: absolute;
	top: 50%;
}
.slideshow-container .prev, .slideshow-container .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 11px 18px;
	margin-top: -22px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 48px;
	height: 48px;
	width: 48px;
	background: rgba(0,0,0, 0.4);
}
.slideshow-container .next{
    right: 16px;
}
.slideshow-container .prev{
    left: 16px;
}
.slideshow-container .prev:hover, .slideshow-container .next:hover {
    background-color: rgba(0,0,0,1);
    text-decoration:none;
}


/*-----------Slideshow-dot----------- */
.dot-area{
    width:100%;
    float:left;
    display:block;
    padding:20px 0;
    background:orange;
}
.dot-area .dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 5px;
	background-color: #f9f9f9;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.dot-area .active, .dot-area .dot:hover {
    background-color: #008080;
}
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}
@keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}


/*-----------your-name----------- */
.your-area{
    width:100%;
    float:left;
    display:block;
    background:#003333;
}
.your-area h1{
    padding:100px 0;
    font-size:34px;
    color:#fff;
    text-align: center;
    font-weight:600;
}
.your-area h1 span{
    font-size:42px;
    text-transform:uppercase;
}
/* motto */

.row{
position: : relation;
max-width: 970px;
height: :auto;
margin:0 auto;

}
@media all and (max-width:1000px){
.row{
padding: 0 15px;
box-sizing: :border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}

}
#moto {
font-size: 48px;
font-weight: 300;
color:#484848;
padding: 60px 30px 10px;
letter-spacing: 0.8px;
}
#moto span{
  color:#FFA500 !important;
  font-weight: 700;
}

/* Searchbar CSS */

#searchbar-wrapper{
position:relative;
width: 100%;
height:auto;
/* margin-left: 30px; */
}

 #searchbar{
position:relative;
width: 100%;
height:auto;
}

#searchbar input{
font-size: 19px;
outline: none;
}

#searchbar input[type="text"] {
    padding:19px 15px 17px; 
    width: 100%;
    display: inline-block;
    border: 1px solid #ccc;
    height: 5em;  
    text-align: start;
}

#searchbar input[type="text"]:focus{
padding:19px 15px 17px; 
border-bottom: 3px solid #FFA500;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition: all 0.3s ease;
}


#searchbar input[type="submit"]{
      width:200px;
      display: inline-block;
      padding: 10px 0;
      border: none;
      color: #fff;
      background-color: #FFA500;
      cursor: pointer;
      transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease;
      -moz-transition:all 0.3s ease;
      -o-transition: all 0.3s ease;
      border-top-right-radius: 3px;
      -moz-border-top-right-radius:3px;
      border-bottom-right-radius: 3px;
      -webkit-border-bottom-right-radius: 3px;
      -moz-border-bottom-right-radius: 3px;
}

#searchbar input[type="submit"]:hover{
  background-color: #FFA500;
}
/*:::::::::::::::::Responsive Media Query:::::::::::::::::::*/

@media only screen and (max-width:1279px){
.top-nav ul li {
	margin: 0 20px;
}
}
@media only screen and (max-width:1023px){

}
@media only screen and (max-width:979px){
.top-nav {
	height: 70px;
}
.top-nav .logo {
	height: 70px;
}
.top-nav .search-container {
	padding: 13px 0;
}
.top-nav ul li a {
	font-size: 14px;
	letter-spacing: 0;
}
.top-nav ul {
	padding: 24px 0;
}
.slideshow-container {
	margin-top: 68px;
}
.slideshow-container .slider-text h1 {
	width: 560px;
	font-size: 27px;
}
.slideshow-container .slider-text {
	height: 400px;
}
}
@media only screen and (max-width:899px){
.slideshow-container .slider-text p {
	max-width: 600px;
}
.top-nav ul li {
	margin: 0 15px;
}
.your-area h1 {
	font-size: 18px;
}
.your-area h1 span{
	font-size: 22px;
}
}
@media only screen and (max-width:799px){

}
@media only screen and (max-width:767px){
.top-nav {
	height: auto;
}
.top-nav .logo {
	height: auto;
    border:0;
}
.top-nav .logo img {
	width: 180px;
	margin: auto;
    display:block;
}
.top-nav .search-container {
	padding: 0;
}
.navigation {
	float: none;
	margin: auto;
}
.top-nav ul {
	float: none;
	padding: 12px 0;
	width: auto;
	display: table;
	margin: auto;
}
.top-nav input[type="text"] {
	height: 38px;
}
.top-nav .search-container button {
	height: 38px;
}
.slideshow-container {
	margin-top: 170px;
}
.slideshow-container .slider-text h1 {
	width: 100%;
	padding: 0 90px;
}
.slideshow-container .slider-text p {
	max-width: 100%;
	padding: 0 90px;
}
}
@media only screen and (max-width:639px){

}
@media only screen and (max-width:599px){
.slideshow-container .slider-text h1 {
	margin: 65px auto auto;
}
}
@media only screen and (max-width:479px){
.top-nav ul li {
	margin: 0 9px;
}
.slideshow-container .slider-text h1 {
	padding: 0 85px;
    font-size: 16px;
}
.slideshow-container .slider-text p {
	padding: 0 78px;
    font-size:12px;
}
.slideshow-container .slider-text {
	height: 350px;
}
.slideshow-container .slider-text h1 {
	margin: 100px auto auto;
}
.your-area h1 {
	font-size: 13px;
}
.your-area h1 span {
	font-size: 14px;
}
}
@media only screen and (max-width:359px){
  .top-nav ul li {
    margin: 0 5px;
  }
  
  #searchbar input[type="text"] 
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

    <section class="top-nav">
        <div class="col-md-2 col-sm-2 col-xs-12">
            <div class="logo">
                <a href="index.php"><img src="logo.png" alt="ElephantRoom"/></a>
            </div>
        </div>
        <div class="col-md-4 col-sm-4 col-xs-12">
            <div class="search-container">
                <form action="/action_page.php">
                    <input type="text" placeholder="Keywords.." name="search">
                    <button type="submit">Search</button>
                </form>
            </div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="navigation">
                <ul>
                    <li><a href="#">Become a Host</a></li>
                    <li><a href="#">Help</a></li>
                    <li><a href="#">Sign Up</a></li>
                    <li><a href="#">Log In</a></li>
                </ul>
            </div>
        </div>
    </section>
    <section class="slideshow-container">
        <div class="mySlides fade">
            <div class="slider-text">
                <img src="img/slider-image1.jpg"/>
                <h1> why book an expensive hotel when you can book a cheap apartment</h1>
                <p>Lorem ipsum dolor sit amet, consecteur adipiscing<br/>
                    elit. Donec venenatis bibendum nunc ut convallis. Suspendisse in nunc unterdum quam pellentesque.</p>
            </div>
        </div>
        <div class="mySlides fade">
            <div class="slider-text">
                    <img src="img/slider-image2.jpg"/>
                <h1>We have you covered anywhere you go in Africa</h1>
                <p>Lorem ipsum dolor sit amet, consecteur adipiscing<br/>
                elit. Donec venenatis bibendum nunc ut convallis. Suspendisse in nunc unterdum quam pellentesque.</p>
            </div>
        </div>
        <div class="mySlides fade">
            <div class="slider-text">
                <img src="img/slider-image3.jpg"/>
                <h1> We believe in a world with no frontier</h1>
                <p>Lorem ipsum dolor sit amet, consecteur adipiscing</p>
            </div>
        </div>
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </section>
    <br>
    <section class="dot-area" style="text-align:center">
        <span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
        <span class="dot" onclick="currentSlide(3)"></span>
    </section>

  <!-- Moto -->
    <div class="row">
        <h1 id="moto"><span>Are you ready?</span> Explore Africa<br /> on Elephant Room.</h1>
      </div>


  <!-- SEARCHBAR-->
  <div id="searchbar-wrapper">
    <div class="row">
      <form method="GET" action="index.html" ID="searchbar">
        <div class="col-sm-6 col-md-6 mb-2">
          <input type="text" name="destination" placeholder="Destination, city, address " />
        </div>
        <div class="col-sm-6 col-md-6">
          <input type="submit" name="search" value="Search" />
        </div>
      </form>
    </div>
  </div>