Content is hidden mobile device - html

Question

I am building a website using HTML and CSS. The problem:when accessing the website on a mobile device it will not show all the content, basically parts of the text, buttons, fields are hidden.
Please have a look at the pictures I have attached to have a better understanding. Thanks
mobile view
desktop view
/* ==== Google font ==== */
#import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700|Open+Sans:300,400,600,700');
/* === fontawesome === */
#import url('font-awesome.css');
/* ==== overwrite bootstrap standard ==== */
#import url('overwrite.css');
#import url('animate.css');
body {
font-family:'Open Sans', Arial, sans-serif;
font-size:14px;
font-weight:300;
line-height:1.6em;
color:#000;
background-color:#fff;
}
hi,h2,h3,h4,h5,h6 {
color:#000;
line-height:1.1em;
}
p {
color:#000;
}
a:hover {
text-decoration:none;
}
.navbar-default {
margin-top:-10px;
background-color: #fff;
border-radius:0;
border:0;
}
.container-fluid > .navbar-header {
margin-right: 30px;
margin-left: 10px;
margin-top:20px;
border-radius:0;
}
.navbar-brand {
float: left;
height: 30px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
.navbar-brand h1 {
float: left;
line-height:20px;
padding: 20px;
font-size: 30px;
margin-top:-15px;
color:#6D9C91;
}
.navbar-brand h1:hover {
background-color:#fff;
}
.navbar-brand img{
float: center;
width: 100px;
height: 100px;
margin-top: -35px;
}
.menu {
font-size:14px;
float:right;
text-transform:uppercase;
font-weight:500;
}
.menu ul.nav-tabs li {
color:#000;
}
.nav-tabs {
border-bottom: 0;
}
.nav-tabs > li {
float: left;
margin-bottom: 0;
}
.nav-tabs > li > a {
margin-bottom:20px;
margin-right: 20px;
line-height: 1.42857143;
border-bottom: 3px solid transparent;
border-radius:0;
color:#000;
border-top:0;
border-right:0;
border-left:0;
}
.nav-tabs > li > a:hover {
border-color: #eee #eee #6D9C91;
color: #6D9C91;
border-radius:0;
background-color:#f9f9f9;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #fff;
cursor: default;
background-color: #6D9C91;
border: 0;
border-bottom-color: transparent;
cursor:pointer;
}
/*===========================
slider
============================ */
.slider {
position: relative;
margin-top:-20px;
}
.slider img {
width: 100%;
}
#carousel-slider {
position: relative;
}
#carousel-slider .carousel-indicators {
bottom: -40px;
}
#carousel-slider .carousel-indicators li {
border: 1px solid #ffbd20;
}
#carousel-slider a i {
border-radius:50%;
font-size: 30px;
height: 50px;
padding: 10px;
position: absolute;
top: 50%;
width: 50px;
color:#6d9c91;
background:#6d9c91;
color:#fff;
}
#carousel-slider a i:hover {
background:#6d9c91;
color:#fff;
border: 1px solid #6d9c91;
}
#carousel-slider
.carousel-control {
width:inherit;
}
#carousel-slider .carousel-control.left i {
left:50px;
top: calc(50% - 50px);
}
#carousel-slider .carousel-control.right i {
right: 50px;
top: calc(50% - 50px);
}
.carousel-caption {
position: absolute;
right: 15%;
top: calc(50% - 150px);
font-size:40px;
left: 15%;
z-index: 10;
padding-bottom: 0px;
color: #fff;
text-align: center;
}
.carousel-caption h2 {
font-size:40px;
color: #fff;
text-transform: uppercase;
}
.carousel-caption h2 span {
font-size:40px;
color: #fff;
}
.carousel-caption p {
font-size:25px;
margin-top:30px;
margin-bottom:20px;
color:#fff;
padding:10px;
}
#media (max-width: 767px) {
.carousel-caption {
font-size: 18px;
}
.carousel-caption h2, .carousel-caption h2 span, .carousel-caption p {
font-size:18px;
}
}
.carousel-inner .form-inline .form-group button[type="livedemo"]{
padding:20px 60px;
font-size:20px;
background:#6d9c91;
color:#fff;
border-radius:0;
border-color:#fff;
text-transform:uppercase;
}
.carousel-inner .form-inline .form-group button[type="livedemo"]:hover {
color:#fff;
opacity: 0.8;
-webkit-transition: color 300ms, background-color 300ms;
-moz-transition: color 300ms, background-color 300ms;
-o-transition: color 300ms, background-color 300ms;
transition: color 300ms, background-color 300ms;
}
.carousel-inner .form-inline .form-group button[type="getnow"]{
padding:20px 60px;
font-size:20px;
background:#fff;
color:#272727;
border-radius:0;
text-transform:uppercase;
}
.carousel-inner .form-inline .form-group button[type="getnow"]:hover {
color:#fff;
border-color:#fff;
background:#6d9c91;
-webkit-transition: color 300ms, background-color 300ms;
-moz-transition: color 300ms, background-color 300ms;
-o-transition: color 300ms, background-color 300ms;
transition: color 300ms, background-color 300ms;
}
#media (max-width: 991px) {
.sign-up-form .form-control {
margin-bottom: 20px;
}
.sign-up-form .btn {
margin-bottom: 20px;
}
}
#media (min-width: 768px) {
.sign-up-form .form-control {
width: 350px;
}
}
.content {
background-color:#f9f9f9;
padding:50px;
text-align:center;
margin-top: -50px;
}
.content span {
color: #154360;
}
.content p {
margin-top:50px;
margin-bottom:30px;
color: #0b5345 ;
}
.breadcrumb {
padding:30px;
}
.breadcrumb h4 {
color:#6D9C91;
text-transform:uppercase;
text-align:center;
font-size:20px;
}
.breadcrumbs {
margin-top:30px;
margin-bottom:30px;
padding:30px;
}
.breadcrumbs h4 {
color:#6D9C91;
text-transform:uppercase;
text-align:center;
font-size:20px;
}
.contents {
margin-top:10px;
}
.contents p {
margin-top:30px;
margin-bottom:30px;
}
.bg {
margin-top:10px;
}
.recent button.btn-primarys h3 {
padding:10px;
font-size:30px;
text-decoration:0;
color:#fff;
}
.align-center {
text-align:center;
background-color:#fff;
color:#000;
padding:60px;
margin-top:30px;
margin-bottom:30px;
}
.align-center p {
margin-top:10px;
margin-bottom:30px;
}
.align-center:hover {
border-bottom: 30px solid transparent;
border-color:#6D9C91;
margin-top:-5px;
-webkit-box-shadow: 1px 2px 2px 4px rgba(204,204,204,1);
-moz-box-shadow: 1px 2px 2px 4px rgba(204,204,204,1);
box-shadow: 1px 2px 2px 4px rgba(204,204,204,1);
}
.boxs {
margin-top:30px;
}
.icon {
margin-top:30px;
margin-bottom:30px;
color:#6D9C91;
}
.ficon i {
color:#6D9C91;
}
/* --- Feature --- */
.feature {
background-color:#f6f6f6;
}
.feature p {
margin-top:-30px;
margin-bottom:30px;
padding:30px;
text-align: center;
font-family: proxima-nova;
font-size: 15px;
}
.feature h1{
font-family: proxima-nova;
font-size: 25px;
}
/* --- Portfolio --- */
.col-md-6{
text-align: center;
color: black;
margin-bottom: 10px;
}
.col-md-4{
text-align: center;
color: black;
margin-bottom: 10px;
}
}
.portfolios {
text-align:center;
margin-top:10px;
margin-bottom:30px;
background-color:#f6f6f6;
padding:90px 0 90px 0;
}
.portfolio {
margin-top:5px;
}
.list-group {
padding-left: 0;
margin-top:50px;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #eee;
border: 1px solid #000;
}
.list-group-item.active {
background-color:#eee;
border-color:#eee;
color:#6D9C91;
}
.list-group-item.active:hover {
background-color:#6D9C91;
border-color:#6D9C91;
}
.list-group-item.active p.list-group-item-text {
color:#000;
}
.image {
margin-top:80px;
}
/* --- Blog --- */
.page-header {
padding-bottom: 9px;
margin: 20px 0 20px;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
margin-top:50px;
}
.blog h5 {
color:#000;
margin-left:20px;
text-transform:uppercase;
margin-top:10px;
}
.blog img {
margin-top:10px;
margin-bottom:10px;
}
.blog h3,p {
color:#000;
padding:15px;
}
.blog .ficon {
text-align:center;
margin-bottom:30px;
}
.form-search .form-control {
margin-top:20px;
}
.media h4 {
color:#000;
margin-bottom:30px;
}
.media-body .ficon {
float:right;
margin-right:30px;
}
.media-body h4 {
color:#000;
}
.media-list {
padding-left: 0;
list-style: none;
margin-left:90px;
margin-bottom:20px;
}
.panel {
margin-top:20px;
margin-bottom: 20px;
background-color: #fff;
border:#eee 1px solid transparent;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0;
border-top-right-radius: 0;
text-align:center;
}
.panel-default {
border-color: #eee;
border-bottom-color:#eee;
}
.panel-default > .panel-heading {
color: #fff;
background-color: #6D9C91;
border-color: #eee;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #eee;
border-bottom-color:#eee;
}
.panel-default > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #eee;
}
.list-group h5 {
color:#fff;
text-align:center;
margin-bottom:-5px;
background:#50c0e9;
padding:15px 20px;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #eee;
color:#000;
}
.list-group-item:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.list-group-item > .badge {
float: right;
border-radius:0;
background-color:#fff;
color:#000;
}
.popular-tags h5 {
color:#6D9C91;
margin-bottom:30px;
text-align:center;
}
.popular-tags ul.tags {
list-style:none;
margin:0;
margin-left: 0;
padding-left:0;
}
.popular-tags ul.tags li {
margin:0 5px 15px 0;
display:inline-block;
}
.popular-tags ul.tags li a {
background:#eee;
color:#333;
padding:5px 10px;
}
.popular-tags ul.tags li a:hover {
text-decoration:none;
color:#fff;
background-color:#6D9C91;
}
/* --- Contact area --- */
form {
margin-top:50px;
margin-bottom:50px;
}
label {
color:#6D9C91;
font-size:14px;
}
.form-group button {
background-color:#6D9C91;
color:#fff;
}
.form-control {
border-radius:0;
}
address {
text-align:center;
font-size:15px;
text-transform:uppercase;
padding-bottom:30px;
color:#333;
}
address br {
margin-top:10px;
}
/* --- Map --- */
.map{
position:relative;
margin-top:50px;
margin-bottom:40px;
}
/* google map */
#google-map{
position:relative;
height: 350px;
}
.widget {
margin-top:10px;
padding:50px;
text-align:center;
}
.widget p,ul {
margin-top:30px;
}
.link-list ul,li,a {
color:#000;
list-style:none;
}
.copyright {
text-align:center;
}
.copyright a {
color:#fff;
}
.sub-footer {
background-color: #6D9C91;
}
ul.social-network {
list-style:none;
margin-top:30px;
text-align:center;
}
ul.social-network li {
display:inline;
margin: 0 5px;
color:#fff;
}
ul.social-network li a {
color:#fff;
}
.credits {
padding-bottom: 15px;
}
.validation {
color: red;
display:none;
margin: 0 0 20px;
font-weight:400;
font-size:13px;
}
#sendmessage {
color: green;
border:1px solid green;
display:none;
text-align:center;
padding:15px;
font-weight:600;
margin-bottom:15px;
}
#errormessage {
color: red;
display:none;
border:1px solid red;
text-align:center;
padding:15px;
font-weight:600;
margin-bottom:15px;
}
#sendmessage.show, #errormessage.show, .show {
display:block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kafeyz</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/responsive-slider.css" rel="stylesheet">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<div class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">
<img src="img/logo.png" alt="logo"/>
</div>
</div>
<div class="menu">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Coffee Shops</li>
<li role="presentation">Coffee Lovers</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</header>
<div class="slider no-padding-bottom">
<div id="about-slider">
<div id="carousel-slider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<div class="carousel-inner">
<div class="item active">
<img src="img/slide1.jpeg" class="img-responsive" alt="">
<div class="carousel-caption no-padding-bottom">
<div class="wow fadeInUp" data-wow-offset="0" data-wow-delay="0.3s">
<h2><span>Take your business to the next level</span></h2>
</div>
<div class="col-md-10 col-md-offset-1">
<div class="wow fadeInUp" data-wow-offset="0" data-wow-delay="0.6s">
<p>A unified platform with everything your coffee shop needs</p>
<p>• mobile app • supplies • marketing • training • staffing solutions</p>
</div>
</div>
<div class="wow fadeInUp" data-wow-offset="0" data-wow-delay="0.9s">
<form class="form-inline margin-top sign-up-form">
<input id="email_intro" type="email" placeholder="enter email address" class="form-control">
<input id="submit_intro" type="submit" value="Get started for FREE" class="btn btn-primary">
</form>
</div>
</div>
</div>
</div>
</div>
<!--/#carousel-slider-->
</div>
<!--/#about-slider-->
</div>
<!--/#slider-->
<div class="content">
</div>
<div class="feature">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="img/1.jpeg" class="img-responsive" alt="" />
<h1>Mobile Ordering App</h1>
<p>Improve your customers experience with an intuitive mobile ordering app
that will allow them to order their drink and food in advance.
Reduce queues, serve more clients and increase your revenue.
</p>
</div>
<div class="col-md-6">
<img src="img/4.jpeg" class="img-responsive" alt="" />
<h1>Supplies & Equipment</h1>
<p>All the coffee shop supplies you need to offer delicious beverages any time of the day to your customers.
Order products like milk, pastries, and paper goods at competitive prices, with just one invoice.
</p>
</div>
<div class="col-md-6">
<img src="img/5.jpeg" class="img-responsive" alt="" />
<h1>Digital Loyalty Program</h1>
<p>You cannot use paper cards to communicate with customers.
With your digital loyalty program, you now have a direct communication channel.
Send a push notification to your customers and encourage them to visit you again!
</p>
</div>
<div class="col-md-6">
<img src="img/6.jpeg" class="img-responsive" alt="" />
<h1>Customized Mobile Marketing</h1>
<p> You now have access to a wealth of data, allowing you to further tailor your marketing campaigns,
offers, and the entire customer experience to each individual.
</p>
</div>
<div class="col-md-6">
<img src="img/3.jpeg" class="img-responsive" alt="" />
<h1>Staffing Solutions</h1>
<p> Book trained & experienced staff for temp or permanent jobs. Access professional training courses
that will help your staff to maintain the quality of your service to a very high standard.
</p>
</div>
<div class="col-md-6">
<img src="img/2.jpeg" class="img-responsive" alt="" />
<h1>Workspace Bookings</h1>
<p>The rise of the freelance and gig economy is bringing more and more people to coffee shops, where they set up a virtual office to work.
Add a new revenue stream to your business by offering workspace bookings at your café.
</p>
</div>
</div>
</div>
</div>
<!--start footer-->
<footer>
<div class="sub-footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="social-network">
<li><i class="fa fa-facebook fa-1x"></i></li>
<li><i class="fa fa-twitter fa-1x"></i></li>
<li><i class="fa fa-linkedin fa-1x"></i></li>
<li><i class="fa fa-pinterest fa-1x"></i></li>
<li><i class="fa fa-google-plus fa-1x"></i></li>
</ul>
</div>
<div class="col-lg-12">
<div class="copyright">
<p>©2018 Kafeyz - All rights reserved.</p>
<div class="credits">
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--end footer-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- begin snippet: js hide: false console: true babel: false -->
<script src="js/jquery-2.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/responsive-slider.js"></script>
<script src="js/wow.min.js"></script>
<script>
wow = new WOW({}).init();
</script>
</body>
</html>