Develop Reference

How to solve this problem with responsive - blank space on right side?

I'm teaching coding in Visual Studio Code, and I found some template and tried make website. After finishing coding I have problem with responsive which u can see on pictures. There is blank white space and I dont know how to fix it.
https://i.stack.imgur.com/8jvI4.jpg
I tried to change values on #media in CSS, but nothing changes. I would really like someone to help me so I know in future where I made a mistake. I also have this reset.css - that is bootstrap.
Thanks in regards.
/* for navigation*/
var dugme = document.getElementById('dugmeNav');
dugme.addEventListener('click',pokreni,false);
function pokreni() {
document.getElementById("myNav").classList.toggle("meni_sirina");
document
.querySelector(".meni-dugmici")
.classList.toggle("meni-dugmici_style");
}
/* FONTOVI */
#font-face {
font-family: 'Raleway';
src: url('../fontovi/Raleway.ttf');
}
#font-face {
font-family: 'Open Sans';
src: url('../fontovi/OpenSans.ttf');
}
#font-face {
font-family: 'Poppins';
src: url('../fontovi/Poppins.ttf');
}
#font-face {
font-family: 'Roboto';
src: url('../fontovi/Roboto.ttf');
}
/* KRAJ FONTOVA */
body {
font-family: 'Raleway', sans-serif;
color: #0c0c0c;
background-color: #ffffff;
}
.margine {
margin: 90px 0;
}
.padding {
padding: 90px 0;
}
.padding2 {
padding: 45px 0;
}
.padding2-top {
padding-top: 45px;
}
.padding2-bottom {
padding-bottom: 45px;
}
.padding-top {
padding-top: 90px;
}
.padding-bottom {
padding-bottom: 90px;
}
.naslovi h2 {
font-weight: bold;
color: #1d1e31;
text-align: center;
position: relative;
padding-bottom: 10px;
}
.naslovi h2::before {
content: "";
width: 100px;
height: 1px;
background-color: #8547ca;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 0;
}
.hero_next_section-margin {
margin-top: 100px;
}
/*header section*/
.omotac {
height: 100vh;
position: relative;
background: -webkit-gradient(linear, left top, right top, color-stop(50%, #f2f7fd), color-stop(45%, #1d1e31));
background: linear-gradient(to right, #f2f7fd 50%, #1d1e31 45%);
}
.sub_page .omotac {
height: auto;
}
#header_sekcija .sekcija {
padding-right: 25px;
padding-left: 25px;
}
#header_sekcija .nav_container {
margin: 0 auto;
}
.navigacija-sekcija.navbar-prosirenje .navbar-nav .nav-link img {
width: 22px;
margin-right: 15px;
}
.navigacija-sekcija.navbar-prosirenje .navbar-nav .nav-link {
padding: 0px 25px;
color: #fefeff;
text-align: center;
font-family: "Roboto", sans-serif;
}
.meni-dugmici {
z-index: 9;
position: absolute;
right: 15px;
top: 14px;
}
.meni-dugmici button {
margin-top: 12px;
outline: none;
border: none;
background-color: transparent;
}
.meni-dugmici span {
display: block;
width: 35px;
height: 5px;
background-color: #fff;
margin: 7px 0;
-webkit-transition: all .3s;
transition: all .3s;
}
.meni-dugmici .meni-dugmici .s-2 {
-webkit-transition: all .1s;
transition: all .1s;
}
.meni-dugmici_style button {
position: fixed;
right: 29px;
top: 14px;
}
.meni-dugmici_style button .s-1 {
-webkit-transform: rotate(45deg) translateY(17px);
transform: rotate(45deg) translateY(17px);
}
.meni-dugmici_style button .s-2 {
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
.meni-dugmici_style button .s-3 {
-webkit-transform: rotate(-45deg) translateY(-17px);
transform: rotate(-45deg) translateY(-17px);
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.overlay .closebtn {
position: absolute;
top: 0;
right: 30px;
font-size: 60px;
}
.overlay a {
padding: 0px;
text-decoration: none;
font-size: 22px;
color: #f1f1f1;
display: block;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.overlay-sadrzaj {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.meni_sirina {
width: 100%;
}
a,
a:hover,
a:focus {
text-decoration: none;
}
a:hover,
a:focus {
color: initial;
}
.btn,
.btn:focus {
outline: none !important;
-webkit-box-shadow: none;
box-shadow: none;
}
.navigacija-sekcija .nav_search-btn {
background-image: url(../slike/search-icon.png);
background-size: 18px;
background-repeat: no-repeat;
width: 35px;
height: 35px;
padding: 0;
border: none;
margin: 0 40px 0 15px;
background-position: center;
}
.navbar-logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navbar-logo img {
width: 40px;
margin-right: 5px;
}
.navbar-logo h1 {
text-transform: uppercase;
font-size: 24px;
font-weight: 700;
color: #8547ca;
margin-top: 5px;
}
.navigacija-sekcija {
z-index: 99999;
padding: 15px 0;
}
.navigacija-sekcija .navbar-toggler {
outline: none;
}
.navigacija-sekcija .navbar-toggler .navbar-toggler-icon {
background-image: url(../slike/menu.png);
background-size: 55px;
}
.quote_btn-container a {
display: inline-block;
padding: 5px 15px;
background-color: #fc5d35;
color: #f7f7f7;
font-size: 14px;
text-transform: uppercase;
}
/*end header section*/
/* contact section */
.kontakt_sekcija {
background-color: #f2f7fd;
}
.kontakt_sekcija h3 {
font-size: 26px;
color: #010103;
font-weight: 600;
font-family: 'Raleway', sans-serif;
margin-bottom: 35px;
}
.kontakt_sekcija .row {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kontakt_sekcija input {
border: none;
outline: none;
border-bottom: 1px solid #000;
width: 90%;
margin: 15px 0;
background-color: transparent;
}
.kontakt_sekcija input::-webkit-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input:-ms-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input::-ms-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input::placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_form-container #posaljiDugme {
border: none;
background-color: #8c60bd;
color: #fff;
font-size: 15px;
padding: 15px 45px;
border-radius: 30px;
text-transform: uppercase;
font-weight: bold;
}
#kontaktnaslov {
font-size: 26px;
color: #010103;
font-weight: 600;
font-family: 'Raleway', sans-serif;
margin-bottom: 35px;
}
.contact_img-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.contact_img-box img {
width: 100%;
}
/* end contact section */
/* info section */
.info_sekcija {
background-color: #363636;
color: #ffffff;
font-family: 'Poppins', sans-serif;
padding-left: 20px;
}
.info_sekcija h4 {
margin-bottom: 12px;
font-size: 22px;
}
.info_logo-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info_logo-box h3 {
font-weight: bold;
padding: 5px 35px;
border-bottom: 1.5px solid #8547ca;
}
.info_sekcija ul {
padding: 0;
}
.info_sekcija ul li {
list-style-type: none;
margin: 3px 0;
}
.info_sekcija ul li a {
color: #ffffff;
}
.info_sekcija ul li a:hover {
color: #8547ca;
}
.info_sekcija .form_container input {
width: 225px;
height: 40px;
padding: 10px;
}
.info_sekcija .form_container::-webkit-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container:-ms-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container::-ms-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container::placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container .pretplataDugme {
background-color: #8c60bd;
border: none;
outline: none;
color: #fff;
padding: 8px 30px;
margin-top: 15px;
font-size: 15px;
text-transform: uppercase;
}
.mreze_container {
width: 95%;
margin: 0 auto;
border-top: 1px solid #898989;
padding: 25px 0;
}
.info_sekcija .social-box {
margin: 0 auto;
width: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info_sekcija .social-box img {
width: 35px;
margin-right: 5px;
}
/* end info section */
/* footer section*/
.footer_sekcija {
background-color: #8547ca;
padding: 20px;
}
.footer_sekcija p {
margin: 0;
text-align: center;
color: #fefdfc;
}
.footer_sekcija a {
color: #fefdfc;
}
#media (max-width: 1280px) {
.slajder_sekcija .img-box img {
height: auto;
width: 100%;
}
.slajder_sekcija .detalji-box h2 {
font-size: 4.5rem;
}
}
#media (max-width: 992px) {
.slajder_sekcija .detalji-box h2 {
font-size: 3.5rem;
}
.slajder_sekcija .detalji-box h3 {
font-size: 2rem;
}
.slajder_sekcija .carousel-control-prev {
top: 15px;
}
.slajder_sekcija .carousel-control-next {
bottom: 75px;
}
}
#media (max-width: 769px) {
.omotac {
background: linear-gradient(to bottom, #f2f7fd 50%, #1d1e31 45%);
}
.sub_page .omotac {
background: linear-gradient(to bottom, #f2f7fd 50%, #f2f7fd 45%);
}
.omotac {
height: auto;
}
.meni-dugmici span {
background-color: #1d1e31;
}
.meni-dugmici_style button span {
background-color: #fff;
}
.carousel-indicators {
display: none;
}
.slajder_sekcija .img-box {
margin-top: 22.5px;
}
.slajder_sekcija .carousel-control-prev,
.slajder_sekcija .carousel-control-next {
display: none;
}
.skidanje_sekcija .main-img-box {
margin-top: 22.5px;
}
.onama_sekcija {
background-image: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url("../slike/about-bg.jpg");
}
.onama_sekcija .detalji-box {
text-align: left;
height: auto;
}
.onama_sekcija .detalji-box.b-1 a {
margin: 0 auto;
}
.onama_sekcija .detalji-box.b-1 {
margin-bottom: 22.5px;
}
.info_sekcija .col-md-3 {
padding: 10px 12.50px;
text-align: left;
}
.contact_img-box {
margin-top: 22.5px;
}
.kol-levo {
float: none;
display: block;
margin: 0 auto;
width: 500px;
}
.kol-desno {
margin: 50px 0px 0px 180px;
}
.b-3 p {
font-size: 20px;
font-weight: bold;
color: #8c60bd;
}
.b-4 p {
margin-top: 25px;
font-size: 20px;
font-weight: bold;
color: #8c60bd;
}
}
#media (max-width: 576px) {
.kontakt_sekcija input {
width: 100%;
}
.info_sekcija .social-box {
width: auto;
}
}
#media (max-width: 400px) {
.slajder_sekcija .detalji-box h3 {
font-size: 1.5rem;
}
.slajder_sekcija .detalji-box h2 {
font-size: 2.5rem;
}
.pretplata_sekcija form {
flex-direction: column;
}
.pretplata_sekcija form input {
width: 100%;
height: 45px;
}
.pretplata_sekcija form .pretplataDugme {
width: 150px;
height: 45px;
line-height: 45px;
margin-top: 25px;
}
}
#media (max-width: 376px) {
.kol-levo {
float: none;
display: block;
margin: 0 auto;
width: 250px;
padding: 0;
}
.kol-desno {
margin: 50px 0px 0px 50px;
padding: 0;
}
.b-3 p {
padding-top: 10px;
color: #FFF;
font-size: 17px;
}
.b-4 p {
margin-top: 20px;
color: #FFF;
font-size: 17px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Abdans - Kontakt</title>
<!-- slajder css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css">
<!-- CSS -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/stil.css">
</head>
<body>
<!-- Header deo -->
<div class="omotac">
<header class="header_sekcija">
<div class="sekcija">
<nav class="navbar navbar-prosirenje navigacija-sekcija">
<div class="navbar-vracanje">
<div class="meni-dugmici">
<button id="dugmeNav">
<span class="s-1"> </span>
<span class="s-2"> </span>
<span class="s-3"> </span>
</button>
</div>
<div id="myNav" class="overlay">
<div class="overlay-sadrzaj">
POČETNA
O NAMA
ISKUSTVA KORISNIKA
KONTAKT
</div>
</div>
</div>
</nav>
<a class="navbar-logo" href="index.html">
<h1>
ABDANS
</h1>
</a>
</div>
</header>
<!-- Zavrsava se header deo -->
<!-- kontakt -->
<section class="kontakt_sekcija padding">
<div class="container">
<div class="d-flex ">
<h2 id="kontaktnaslov">
Kontaktirajte nas
</h2>
</div>
<div class="row">
<div class="col-md-6">
<form action="kontakt.php" method="get">
<div class="kontakt_form-container">
<div>
<div>
<input type="text" placeholder="Ime">
</div>
<div>
<input type="text" placeholder="Broj telefona">
</div>
<div>
<input type="email" placeholder="Email">
</div>
<div class="mt-5">
<input type="text" placeholder="Poruka">
</div>
<div class="mt-5">
<input type="submit" value="pošalji" id="posaljiDugme">
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<div class="contact_img-box">
<img src="slike/contact-img.png" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- zavrsavaju se kontakti -->
<!-- info -->
<section class="info_sekcija padding-top">
<div class="info_logo-box">
<h3>
ABDANS
</h3>
</div>
<div class="container padding2">
<div class="row">
<div class="col-md-3">
<h4>
O nama
</h4>
<p>
Firma se bavi prodajom BIO prehrambenih proizvoda.
</p>
</div>
<div class="col-md-3">
<h4>
Korisni linkovi
</h4>
<ul>
<li>
<a href="http://www.organiccentar.rs/prednosti/sta-organski-proizvodi.html">
Šta je BIO proizvod ?
</a>
</li>
<li>
<a href="#">
Kako preuzeti aplikaciju ?
</a>
</li>
<li>
<a href="onama.html">
O nama
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h4>
Kontaktirajte nas
</h4>
<p>
Kontaktirajte nas na svim društvenim mrežama, klikom na ikonicu ispod.
</p>
</div>
<div class="col-md-3">
<div class="pretplata_container">
<h4>
Newsletter
</h4>
<div class="form_container">
<form action="pretplata.php" method="post">
<input type="email" placeholder="Upišite vaš email" id="preplata_provera">
<input type="submit" value="Pretplati se" class="pretplataDugme">
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="mreze_container">
<div class="social-box">
<a href="#">
<img src="slike/fb.png" alt="">
</a>
<a href="#">
<img src="slike/twitter.png" alt="">
</a>
<a href="#">
<img src="slike/linkedin.png" alt="">
</a>
<a href="#">
<img src="slike/instagram.png" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- zavrsava se info -->
<!-- footer -->
<footer class="sekcija footer_sekcija">
<p>
© 2022 Sva prava zadržana. Napravljen od strane
Nikole Tešića
</p>
</footer>
<!-- zavrsava se footer -->
<!-- javasript -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/reset.js"></script>
<script src="js/navigacija.js"></script>
</div>
</body>
</html>
Thanks in regards.

Try width: 100vw; in the body element(or the element that have background color)

How to sort a group of elements using jquery sortable and prevent a spot from being placed

I have a list of categories, each with their own questions below them. I want to sort all categories alongside with their questions.
With my current code I can only sort the category bar but the questions are left in place.
This is my html (questions and categories can be any amount because when creating them they can be added dynamically):
<span id="sortablecats" class="ui-sortable">
<label class="categorytitle ui-sortable-handle" style="">jjjj</label>
<div class="row ui-sortable-handle" id="questionrow">
<div class="col-md-8">
<p class="questionclass">hhhh</p>
</div>
<div class="col-md-4">
<div class="container text-right">
<input type="radio" name="questionlist[jjjj][hhhh]" id="radio-1" value="ok" required="">
<label class="radiotoggle" for="radio-1"><span class="radio">Ok</span></label>
<input type="radio" name="questionlist[jjjj][hhhh]" id="radio-2" value="fout" checked="">
<label class="radiotoggle" for="radio-2"><span class="radio">Fout</span></label>
<input type="radio" name="questionlist[jjjj][hhhh]" id="radio-3" value="nvt">
<label class="radiotoggle" for="radio-3"><span class="radio">N.v.t</span></label>
</div>
</div>
<div class="col-md-8">
<p class="questionclass">jjj</p>
</div>
<div class="col-md-4">
<div class="container text-right">
<input type="radio" name="questionlist[jjjj][jjj]" id="radio-4" value="ok" required="" checked="">
<label class="radiotoggle" for="radio-4"><span class="radio">Ok</span></label>
<input type="radio" name="questionlist[jjjj][jjj]" id="radio-5" value="fout">
<label class="radiotoggle" for="radio-5"><span class="radio">Fout</span></label>
<input type="radio" name="questionlist[jjjj][jjj]" id="radio-6" value="nvt">
<label class="radiotoggle" for="radio-6"><span class="radio">N.v.t</span></label>
</div>
</div>
</div>
<label class="categorytitle ui-sortable-handle" style="">Testt</label>
<div class="row ui-sortable-handle" id="questionrow">
<div class="col-md-8">
<p class="questionclass">test</p>
</div>
<div class="col-md-4">
<div class="container text-right">
<input type="radio" name="questionlist[Testt][test]" id="radio-7" value="ok" required="">
<label class="radiotoggle" for="radio-7"><span class="radio">Ok</span></label>
<input type="radio" name="questionlist[Testt][test]" id="radio-8" value="fout" checked="">
<label class="radiotoggle" for="radio-8"><span class="radio">Fout</span></label>
<input type="radio" name="questionlist[Testt][test]" id="radio-9" value="nvt">
<label class="radiotoggle" for="radio-9"><span class="radio">N.v.t</span></label>
</div>
</div>
</div>
</span>
And my js:
$( "#sortablecats" ).sortable({
placeholder: "ui-state-highlight",
connectWith: "#questionrow",
cancel: "#questionrow"
});
I have a jsfiddle to demonstrate what is currently happening
How can I make it so that I only sort a category with all its questions? And only be able to sort them above or below other groups (so not a group in the middle of another group)?

You need to put all of the sortable contents in the same child div and link them to the parent.
For example having the parent div like so :
<div id="sortMyContents">
<div>Content to be draggable with everything inside</div>
<div>Content to be draggable with everything inside</div>
</div>
Following this logic your code should be :
$("#sortablecats").sortable({
connectWith: "#questionrow",
cancel: "#questionrow"
});
/* Dropdown menu */
.dropdown {
position: relative;
display: inline-block;
}
.btn-success {
background-color: #10355e !important;
border: 1px solid #10355e !important;
}
.bar {
height: 18px;
background: green;
}
.savewpi {
margin-top: 10px;
}
.deletefileclass {
cursor: pointer;
font-size: 20px;
color: #10355e;
}
.btn-success:hover {
background-color: #051d38 !important;
border: 1px solid #051d38 !important;
}
.displaynonecoid {
display: none;
}
.lijstnaamtitle {
font-size: 20px;
color: #212529;
}
.lijsttitle {
width: 85% !important;
margin-top: 0px !important;
}
.lijstresult {
background-color: #10355e;
color: #fff;
padding: 20px;
font-size: 20px;
border-radius: 5px;
text-align: center;
margin-top: 15px;
display: none;
}
.horscroll {
overflow-x: scroll !important;
}
.hiddenupload {
display: none;
}
.addsubpage {
display: none;
}
.progress-bar {
background-color: #10355e !important;
}
.fileDisplayArea img {
max-width: 100% !important;
}
.tarievenhead {
background-color: #10355e;
color: #fff;
}
.trinv {
background-color: #edeaea;
}
.companylogo {
max-width: 100%;
}
.headerlogo {
max-height: 100px;
padding-top: 10px;
padding-bottom: 10px;
}
.switch-field {
font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
padding: 40px;
overflow: hidden;
}
.switch-title {
margin-bottom: 6px;
}
.switch-field input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-field label {
float: left;
}
.switch-field label {
display: inline-block;
width: 60px;
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
font-weight: normal;
text-align: center;
text-shadow: none;
padding: 6px 14px;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.container label {
position: relative;
}
/* Base styles for spans */
.container span::before,
.container span::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
/* Radio buttons */
.container span.radio:hover {
cursor: pointer;
}
.addwerkplekinspectie input[type="radio"] {
display: none;
}
.questionclass {
margin-left: 15px;
font-size: 17px;
font-weight: 500;
border-bottom: 2px solid #e9e9e9;
height: 90%;
}
.nomarginleft {
margin-left: 0px !important;
}
.inputtitles {
font-size: 15px;
font-weight: 500;
margin-bottom: 30px;
margin-left: 10px;
}
.borderbottom {
border-bottom: 2px solid #ccc;
}
.text-right {
text-align: right;
margin-top: 5px;
}
.radiotoggle {
display: inline-block;
margin-bottom: .5rem;
margin-left: 60px;
position: relative !important;
right: 0px;
}
.container span.radio::before {
left: -52px;
width: 45px;
height: 25px;
background-color: #10355e;
border-radius: 50px;
}
.container span.radio::after {
left: -49px;
width: 17px;
height: 17px;
border-radius: 10px;
background-color: #6C788A;
transition: left .25s, background-color .25s;
}
input[type="radio"]:checked+label span.radio::after {
left: -27px;
background-color: #ffffff;
}
.categorytitle {
font-size: 20px;
background-color: #10355e;
padding: 10px;
color: #fff;
display: block;
border-radius: 3px;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked+label {
background-color: #A5DC86;
-webkit-box-shadow: none;
box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
}
.deletedemployee {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #10355e;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
width: 100%;
}
.deletewpi {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #10355e;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
width: 100%;
}
.deletedtemplate {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #10355e;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
width: 100%;
}
.addedemployee {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.filedeletedmessage {
display: none;
font-size: 15px;
padding: 5px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.resultmessage {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.resultmessageuser {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.deleteduser {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.manualmessage {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.resultmessageuseradded {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.editcontentmessage {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.fs-upload-input {
background-color: #10355e;
color: #fff;
border-radius: 3px;
padding: 20px;
}
.fs-upload-target {
padding-top: calc(.375rem + 1px);
padding-bottom: calc(.375rem + 1px);
margin-bottom: 0;
font-size: inherit;
line-height: 1.5;
float: left;
font-weight: 500;
}
.categorylist {
margin-bottom: 20px;
padding-left: 0px;
}
.sortwrap input {
display: inline-block !important;
width: 85% !important;
}
.sortwrap {
position: inherit !important;
}
.catinput {
margin-top: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.dragndrop {
font-size: 34px;
color: #10355e;
cursor: move;
border: 1px solid #ced4da;
border-radius: 3px;
top: 7px;
position: relative;
}
.ui-state-highlight {
width: 100%;
height: 40px;
border: 1px solid #113c69;
width: 300px;
}
.wrapper {
clear: both;
!important;
}
.inspectiebutton {
margin-top: 20px;
}
.removebutton {
margin-top: 18px;
margin-left: -90px;
}
.questionbutton {
margin-left: 20px;
margin-bottom: 5px;
}
.questioninput {
margin-left: 20px;
margin-bottom: 5px;
}
.removequestion {
margin-top: 10px;
}
.categorylist li {
list-style: none;
list-style-position: inside;
}
.categorylist li input {
font-weight: 500;
}
.questionlist li input {
font-weight: normal;
}
.questionlist li {
margin-top: 10px;
margin-left: -10px;
}
#loginresult {
background-color: #dc0b0b;
color: #fff;
padding: 20px;
border-radius: 4px;
font-size: 20px;
display: none;
}
.dropdown-content {
display: none;
}
.dropdown-show {
display: block !important;
padding: 4px 10px !important;
z-index: 1;
}
/* Einde dropdown menu */
.menuicon {
font-weight: bold;
font-size: 20px;
cursor: pointer;
}
.backlink {
color: #fff;
}
.addcontent {
display: none;
}
.backlink:hover {
color: #fff;
}
.personeel {
font-size: 90px;
}
.versions {
display: none;
}
.green {
color: #55af11 !important;
}
.red {
color: #c31111 !important;
}
.versionlist {
list-style-type: none;
list-style-position: inside;
padding-left: 0px;
}
.versionlist li {
margin-bottom: 10px;
}
.versionlist i {
font-size: 25px;
color: #10355e;
cursor: pointer;
}
.mtop-20 {
margin-top: 20px;
}
.companylink {
color: #0e3158;
text-decoration: underline;
font-weight: bold;
}
.manualtitle {
float: left;
}
.editmanual {
float: right;
font-size: 25px;
color: #113c69;
}
.wysiwyg {
clear: both;
}
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.menuliststyle {
list-style-type: none;
padding: 0px;
}
.menuliststyle a {
color: #10355e;
font-size: 15px;
margin-bottom: 5px;
}
.textcenter {
text-align: center;
}
.logoheader {
padding-top: 10px;
padding-bottom: 10px;
max-width: 200px;
}
.underlinelink {
text-decoration: underline;
color: #10355e;
}
.frontpageicon {
color: #10355e;
font-size: 18px;
}
.cover {
object-fit: cover;
}
.pbottom-0 {
padding-bottom: 0px !important;
}
.ptop-0 {
padding-top: 0px !important;
}
.chapter {}
.font-10 {
font-size: 10px;
}
.h45 {
height: 45px;
}
.mtop10 {
margin-top: 8% !important;
}
.font-12 {
font-size: 12px;
}
.tabheight-100 {
height: 100px;
}
.col-xl-custom {
flex: 0 0 20%;
max-width: 20%;
}
.dashicon {
text-align: center;
padding: 5px;
font-size: 40px;
color: #113c69;
}
.tabheight {
height: 120px;
}
.greydark {
color: #272727;
}
.padding-0 {
padding: 0px !important;
}
.shadowhover {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.1s ease-in-out;
}
.shadowhover:hover {
box-shadow: 0 5px 50px 3px rgba(0, 0, 0, 0.5);
display: inherit;
}
.bigheader {
font-size: 20px !important;
margin-bottom: 20px !important;
}
.btnadd {
color: #fff;
background-color: #10355e;
border-color: #10355e;
margin-bottom: 20px;
}
.bgblue {
background: radial-gradient(at 50% -20%, #1967a9, #0a1832) fixed !important;
}
.btnadd:hover {
color: #fff;
background-color: #051d38;
border-color: #051d38;
margin-bottom: 20px;
}
.actionbuttons {
text-align: center;
}
.actionbuttons i {
color: #0e3158;
font-size: 25px;
}
.normblue {
color: #10355e;
}
.btn-blue {
background-color: #10355e !important;
border: 1px solid #10355e !important;
}
.filestyle {
background-color: #10355e;
}
.padding-025 {
padding: 0.25rem !important;
}
.editwindowadmin {
display: none;
}
.margininput {
margin-bottom: 20px;
}
.activebutton {
background-color: #10355e;
}
.activebutton i {
color: #fff;
}
.activebutton h4 {
color: #fff;
}
.editcontent {
float: right;
}
.editcontent i {
font-size: 30px;
color: #10355e;
cursor: pointer;
}
.table {
width: 100% !important;
}
.nav-pills .nav-item.show .nav-link,
.nav-pills .nav-link.active {
background-color: #10355e !important;
}
.fullwidth {
width: 100%;
}
.font-15 {
font-size: 15px;
}
/* .h60{
height: 60px;
} */
#media only screen and (max-width: 800px) {
.menuliststyle {
list-style-type: none;
padding: 0px;
max-width: 90%;
}
.btnadd {
color: #fff;
background-color: #10355e;
border-color: #10355e;
margin-bottom: 20px;
font-size: 15px !important;
display: block !important;
margin: 0 auto;
margin-bottom: 20px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<span id="sortablecats" class="ui-sortable">
<div>
<label class="categorytitle ui-sortable-handle" style="">jjjj</label>
<div class="row ui-sortable-handle" id="questionrow">
<div class="col-md-8">
<p class="questionclass">hhhh</p>
</div>
<div class="col-md-4">
<div class="container text-right">
<input type="radio" name="questionlist[jjjj][hhhh]" id="radio-1" value="ok" required="">
<label class="radiotoggle" for="radio-1"><span class="radio">Ok</span></label>
<input type="radio" name="questionlist[jjjj][hhhh]" id="radio-2" value="fout" checked="">
<label class="radiotoggle" for="radio-2"><span class="radio">Fout</span></label>
<input type="radio" name="questionlist[jjjj][hhhh]" id="radio-3" value="nvt">
<label class="radiotoggle" for="radio-3"><span class="radio">N.v.t</span></label>
</div>
</div>
<div class="col-md-8">
<p class="questionclass">jjj</p>
</div>
<div class="col-md-4">
<div class="container text-right">
<input type="radio" name="questionlist[jjjj][jjj]" id="radio-4" value="ok" required="" checked="">
<label class="radiotoggle" for="radio-4"><span class="radio">Ok</span></label>
<input type="radio" name="questionlist[jjjj][jjj]" id="radio-5" value="fout">
<label class="radiotoggle" for="radio-5"><span class="radio">Fout</span></label>
<input type="radio" name="questionlist[jjjj][jjj]" id="radio-6" value="nvt">
<label class="radiotoggle" for="radio-6"><span class="radio">N.v.t</span></label>
</div>
</div>
</div>
</div>
<div>
<label class="categorytitle ui-sortable-handle" style="">Testt</label>
<div class="row ui-sortable-handle" id="questionrow">
<div class="col-md-8">
<p class="questionclass">test</p>
</div>
<div class="col-md-4">
<div class="container text-right">
<input type="radio" name="questionlist[Testt][test]" id="radio-7" value="ok" required="">
<label class="radiotoggle" for="radio-7"><span class="radio">Ok</span></label>
<input type="radio" name="questionlist[Testt][test]" id="radio-8" value="fout" checked="">
<label class="radiotoggle" for="radio-8"><span class="radio">Fout</span></label>
<input type="radio" name="questionlist[Testt][test]" id="radio-9" value="nvt">
<label class="radiotoggle" for="radio-9"><span class="radio">N.v.t</span></label>
</div>
</div>
</div>
</div>
</span>

how to move buy button underneath drop down box?

I am trying to move a button underneath the drop down box in my product page. so that the information is presented with one information per row. I tried placing a div tag around the button to see if that be seen as a separate element that goes below the previous element but that did not work so I am lost in what to do to make the buy button to go underneath the size and 1 boxes.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="bike-1-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="Menu">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div id="space"></div>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" >
<div class="wrapper">
<div class="product group">
<div class="col-1-2 product-image">
<div class="bg"></div>
<div class="indicator">
</div>
</div>
<div class="col-1-2 product-info">
<h1>Field Notes Cherry Graph 3-Pack</h1>
<h2>$877.50</h2>
<div class="select-dropdown">
<select>
<option value="size">Size</option>
<option value="size">Small</option>
<option value="size">Medium</option>
<option value="size">Large</option>
</select>
</div>
<div class="select-dropdown">
<select>
<option value="quantity">1</option>
<option value="quantity">2</option>
<option value="quantity">3</option>
<option value="quantity">4</option>
</select>
</div>
<br>
<div class="Buy"></div>
Buy
</div>
<ul>
<li>Graph paper 40-page memo book.</li>
<li>3 book per pack. Banded and shrink-wrapped</li>
<li>Three great memo books worth fillin' up with information</li>
<li>Red cherry wood covers</li>
</ul>
</div>
</div>
<div id="footer"></div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
setTimeout(function() {plusSlides(1) }, 1000)
})
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
border: 0;
background-color: #eee;
font-family: "Helvetica", sans-serif;
height: 100%;
width: 100%;
}
*{
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6{
margin: 0;
padding: 0;
border: 0;
}
h1{
font-size: 130%;
}
h2{
color: #aaa;
font-size: 18px;
font-weight: 400;
}
p{
font-size: 12px;
line-height: 1.5;
}
/*.wrapper{
padding: 20px 0px;
}*/
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
#space {
width: 100%;
height: 86px;
}
.product{
background-color: #eee;
border-bottom: 1px solid #ddd;
clear: both;
padding: 0px 10% 70px 10%;
}
.group:after {
content: "";
display: table;
clear: both;
}
.col-1-2{
width: 100%;
height: 100%;
float: left;
}
.product-image{
/*border: 1px dotted #aaa;*/
}
.product-image .bg{
background-image: url('images/slider-1.jpg');
background-size: cover;
background-position: center top;
min-height: 550px;
}
.product-image .indicator{
text-align:center;
}
.dot:hover{
background-color: #444;
}
.product-info{
padding: 0px 8%;
}
.product-info h1{
margin-bottom: 5px;
}
.product-info h2{
margin-bottom: 50px;
}
.product-info .select-dropdown{
display: inline-block;
margin-right: 10px;
position: relative;
width: auto;
float: left;
}
.product-info select{
cursor: pointer;
margin-bottom: 20px;
padding: 12px 92px 12px 15px;
background-color: #fff;
border: none;
border-radius: 2px;
color: #aaa;
font-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select:active, select:focus {
outline: none;
box-shadow: none;
}
.select-dropdown:after {
content: " ";
cursor: pointer;
position: absolute;
top: 30%;
right: 10%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #aaa;
}
.product-info a.add-btn{
background-color: #444;
border-radius: 2px;
color: #eee;
display: inline-block;
font-size: 14px;
margin-bottom: 30px;
padding: 15px 100px;
text-align: center;
text-decoration: none;
transition: all 400ms ease;
}
a.add-btn:hover{
background-color: #555;
}
.product-info p{
margin-bottom: 30px;
}
.product-info p a{
border-bottom: 1px dotted #444;
color: #444;
font-weight: 700;
text-decoration: none;
transition: all 400ms ease;
}
.product-info p a:hover{
opacity: .7;
}
.product-info ul{
font-size: 12px;
padding: 0;
margin-bottom: 50px;
}
.product-info li{
list-style-type: none;
margin-bottom: 5px;
}
.product-info li::before{
content:"\2022";
margin-right: 20px;
}
.product-info a.share-link{
color: #aaa;
font-size: 11px;
margin-right: 30px;
text-decoration: none;
}
.product-info a.share-link:hover{
border-bottom: 2px solid #aaa;
}
#footer {
width:100%;
background-color:#222;
padding: 60px 0px;
position: relative;
bottom: 0;
clear:both;
height:10%;
}

There are multiple things wrong here.
The <br> tag should not be used for element positioning. This should be strictly reserved for text.
If you don't want your elements to display a line, it's probably a good idea to not set their display property to an inline-block for starters.
There are even some syntactical errors (eg. excessive </div> tag and what not). In general, I'd recommend writing your code in some sort of linter as it has some readability issues.
I did the baremost minimum of removing the unnecessary <br> tag and added clear:both to the .Buy class formatting. Producing the desired result.
body {
margin: 0;
padding: 0;
border: 0;
background-color: #eee;
font-family: "Helvetica", sans-serif;
height: 100%;
width: 100%;
}
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 130%;
}
h2 {
color: #aaa;
font-size: 18px;
font-weight: 400;
}
p {
font-size: 12px;
line-height: 1.5;
}
/*.wrapper{
padding: 20px 0px;
}*/
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;
;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
.Buy {
clear: both;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
#space {
width: 100%;
height: 86px;
}
.product {
background-color: #eee;
border-bottom: 1px solid #ddd;
clear: both;
padding: 0px 10% 70px 10%;
}
.group:after {
content: "";
display: table;
clear: both;
}
.col-1-2 {
width: 100%;
height: 100%;
float: left;
}
.product-image {
/*border: 1px dotted #aaa;*/
}
.product-image .bg {
background-image: url('images/slider-1.jpg');
background-size: cover;
background-position: center top;
min-height: 550px;
}
.product-image .indicator {
text-align: center;
}
.dot:hover {
background-color: #444;
}
.product-info {
padding: 0px 8%;
}
.product-info h1 {
margin-bottom: 5px;
}
.product-info h2 {
margin-bottom: 50px;
}
.product-info .select-dropdown {
display: inline-block;
margin-right: 10px;
position: relative;
width: auto;
float: left;
}
.product-info select {
cursor: pointer;
margin-bottom: 20px;
padding: 12px 92px 12px 15px;
background-color: #fff;
border: none;
border-radius: 2px;
color: #aaa;
font-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select:active,
select:focus {
outline: none;
box-shadow: none;
}
.select-dropdown:after {
content: " ";
cursor: pointer;
position: absolute;
top: 30%;
right: 10%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #aaa;
}
.product-info a.add-btn {
background-color: #444;
border-radius: 2px;
color: #eee;
display: inline-block;
font-size: 14px;
margin-bottom: 30px;
padding: 15px 100px;
text-align: center;
text-decoration: none;
transition: all 400ms ease;
}
a.add-btn:hover {
background-color: #555;
}
.product-info p {
margin-bottom: 30px;
}
.product-info p a {
border-bottom: 1px dotted #444;
color: #444;
font-weight: 700;
text-decoration: none;
transition: all 400ms ease;
}
.product-info p a:hover {
opacity: .7;
}
.product-info ul {
font-size: 12px;
padding: 0;
margin-bottom: 50px;
}
.product-info li {
list-style-type: none;
margin-bottom: 5px;
}
.product-info li::before {
content: "\2022";
margin-right: 20px;
}
.product-info a.share-link {
color: #aaa;
font-size: 11px;
margin-right: 30px;
text-decoration: none;
}
.product-info a.share-link:hover {
border-bottom: 2px solid #aaa;
}
#footer {
width: 100%;
background-color: #222;
padding: 60px 0px;
position: relative;
bottom: 0;
clear: both;
height: 10%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="bike-1-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="Menu">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div id="space"></div>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet">
<div class="wrapper">
<div class="product group">
<div class="col-1-2 product-image">
<div class="bg"></div>
<div class="indicator">
</div>
</div>
<div class="col-1-2 product-info">
<h1>Field Notes Cherry Graph 3-Pack</h1>
<h2>$877.50</h2>
<div class="select-dropdown">
<select>
<option value="size">Size</option>
<option value="size">Small</option>
<option value="size">Medium</option>
<option value="size">Large</option>
</select>
</div>
<div class="select-dropdown">
<select>
<option value="quantity">1</option>
<option value="quantity">2</option>
<option value="quantity">3</option>
<option value="quantity">4</option>
</select>
</div>
<div class="Buy"></div>
Buy
</div>
<ul>
<li>Graph paper 40-page memo book.</li>
<li>3 book per pack. Banded and shrink-wrapped</li>
<li>Three great memo books worth fillin' up with information</li>
<li>Red cherry wood covers</li>
</ul>
</div>
</div>
<div id="footer"></div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
setTimeout(function() {
plusSlides(1)
}, 1000)
})
// Scrolling Effect
$(window).on("scroll", function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>

You have <br/> tag before button, just add style to it like this
<br style="clear: both;" />
and you should be fine :)

conflict - jumbotron vs responsive img

I created simple website, by used HTML5, CSS3, JS and Bootstrap. I have conflict with jumbotron and img-responsive. When I minimize the screen aprox. below 760, I see two wallpapers the div.jumbotron, and img-responsive. but I want to see only the img-responsive.
I was checking many times what's going on, but I have no idea.
Do somebody can review the code. I will be really grateful.
Link to this web -https://magdalena-dering.github.io/RWD-Coffee-Corner/
/*BODY*/
body {
background-color: #ffeee6;
font-family: 'Mirza', cursive;
}
/*HEADER*/
#header-nav {
background-color: #ffffff;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
}
.navbar-brand {
padding-top: 25px;
}
.navbar-brand a:focus,
.navbar-brand a:hover {
text-decoration: none;
}
.navbar-brand h1 {
/* Restaurant name */
font-size: 1.8em;
color: #4d0000;
margin-left: 10px;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
line-height: .75;
}
.navbar-brand span {
font-size: 1em;
color: #4d0000;
}
#nav-list a {
font-size: 1.6em;
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
margin-top: 5px;
margin-left: 5px;
background-color: #ffeee6;
border: 1px solid #ffffff;
box-shadow: 0 0 30px #ff9999;
}
#nav-list a:hover {
background: #ffeee6;
box-shadow: 3px 3px 3px #ff9999;
}
.navbar-header button.navbar-toggle,
.navbar-header .icon-bar {
border: 1px solid #661400;
}
.navbar-header button.navbar-toggle {
clear: both;
margin-top: -30px;
}
.navbar-brand a:hover,
.navbar-brand a:focus {
text-decoration: none;
}
/*HOME PAGE*/
.container .jumbotron {
box-shadow: 0 0 30px #ff9999;
border: 1px solid #4d1a00;
padding: 0;
border: 1px solid #ffffff;
}
#menu-tile,
#specials-tile,
#map-tile {
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
height: 280px;
margin: 30px;
position: relative;
overflow: hidden;
text-align: center;
object-position: center;
}
#menu-tile:hover,
#specials-tile:hover,
#map-tile:hover {
box-shadow: 3px 3px 3px #ff9999;
}
#menu-tile {
background: url('../images/menu.jpg') no-repeat;
background-position: center;
background-color: #ffccb3;
}
#specials-tile {
background: url('../images/specials1.jpg') no-repeat;
background-position: center;
background-color: #ffccb3;
}
#menu-tile span,
#specials-tile span,
#map-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
}
/* FOOTER */
.panel-footer {
background-color: #ffffff;
font-size: 1.2em;
margin-top: 20px;
margin-bottom: 20px;
}
.visible-xs {
border-top: 1px solid #800000;
}
#hours span,
#address span,
#sentence span {
color: #4d0000;
text-align: center;
text-shadow: 3px 3px 3px #ff9999;
font-size: 1.3em;
}
/***********MENU SIDE*********/
.category-tile {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 200px;
height: 200px;
margin: 0 auto 15px;
}
.category-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
}
.category-tile:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.category-tile+div {
margin-bottom: 50px;
}
#menu-title {
font-size: 1.8em;
color: #4d0000;
margin-left: 10px;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
text-align: center;
}
span {
font-size: 1.4em;
text-align: center;
}
.text-center {
margin-top: 0px;
margin-bottom: 30px;
}
/***********COFFEE CATEGORY SIDE*********/
.coffee-position {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 180px;
height: 180px;
margin: 0 auto 15px;
margin-bottom: 120px;
}
.coffee-position:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.coffee-position span {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
width: 100%;
}
.row {
margin-right: 0px;
margin-left: 0px;
}
.coffee-price {
font-size: 1.2em;
text-align: center;
margin-top: -110px;
margin-bottom: 20px;
}
.menu-item-tile .menu-item-price span {
font-size: .6em;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 230px;
height: 230px;
margin: 0 auto 15px;
}
.sweets-position:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.sweets-position span {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
font-size: 1.3em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
width: 100%;
}
.sweet-price {
font-size: 18px;
text-align: center;
margin-top: 10px;
margin-bottom: 35px;
}
/***********SPECIALS SIDE*********/
.specials-tile {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 300px;
height: 300px;
margin: auto;
background: url('../images/bday.jpg') no-repeat;
}
.specials-tile2 {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 300px;
height: 300px;
margin: auto;
background: url('../images/catering.jpg') no-repeat;
}
.specials-tile:hover,
.specials-tile2:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.specials-tile span,
.specials-tile2 span {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
width: 100%;
}
h4 {
color: #4d0000;
margin-left: 10px;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
}
.text1,
.text2 {
font-size: 1.3em;
text-align: center;
margin-top: 10px;
position: relative;
border: solid 1px #ffcccc;
padding: 5px;
background-color: #ffe6e6;
}
.text1 a {
color: #4d0000;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
}
.text2 a {
color: #4d0000;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
}
/***********CONTACT SIDE*********/
#map-contact {
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
height: 250px;
width: 100%;
position: relative;
overflow: hidden;
text-align: center;
object-position: center;
}
#map-contact:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.head-text {
color: #4d0000;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
text-align: center;
margin: 20px;
}
.contact-description {
font-size: 1.3em;
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
margin: 30px;
}
}
/********** Large devices only **********/
#media (min-width: 1200px) {
/* Header */
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
}
}
.container .jumbotron {
background: url(../images/coffee-wallpapers-1200.jpg) no-repeat;
height: 675px;
box-shadow: 0 0 30px #ff9999;
}
}
/********** Medium devices only **********/
#media (min-width: 992px) and (max-width: 1199px) {
/* Header */
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
}
/* Home Page */
.container .jumbotron {
background: url(../images/coffee-wallpapers-992.jpg) no-repeat;
height: 558px;
box-shadow: 0 0 30px #ff9999;
}
}
/********** Small devices only **********/
#media (min-width: 768px) and (max-width: 991px) {
/* Header */
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
margin: 5px;
}
/* Home Page */
.container .jumbotron {
background: url('../images/coffee-wallpapers-768.jpg') no-repeat;
height: 432px;
box-shadow: 0 0 30px #ff9999;
}
}
/********** Extra small devices only **********/
#media (max-width: 767px) {
/* Header */
#nav-list a {
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
background-color: #ffeee6;
border: 2px solid #ffffff;
margin-top: 6px;
margin-bottom: 3px;
}
.navbar-nav {
margin: 0px;
margin-top: 3px;
margin-left: -3px;
}
.navbar-brand {
padding-top: 10px;
}
.navbar-brand h1 {
/* Restaurant name */
padding-top: 10px;
font-size: 5vw;
/* 1vw = 1% of viewport width */
margin-top: -10px;
}
#nav-list a {
font-size: 4vw;
}
.navbar-brand span {
font-size: 3vw;
color: #4d0000;
}
/*Home Page*/
#logo-img {
background: url('../images/md.png') no-repeat;
height: 76px;
width: 210px;
}
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
}
/*Footer*/
#menu-tile span,
#specials-tile span,
#map-tile span {
font-size: vw;
}
.panel-footer {
font-size: 3vw;
}
#hours span,
#address span,
#sentence span {
font-size: 4vw;
}
/***********MENU SIDE*********/
.category-tile span {
font-size: 4vw;
}
#menu-title {
font-size: 4vw;
}
span {
font-size: 3vw;
}
/***********COFEE CATEGORY SIDE*********/
.coffee-position span {
font-size: 4vw;
}
.coffee-price {
font-size: 4vw;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position span {
font-size: 4vw;
}
.sweet-price {
font-size: 4vw;
}
/***********SPECIALS SIDE*********/
.specials-tile {
background: url('../images/bday 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
margin-bottom: 10px;
}
.specials-tile2 {
background: url('../images/catering 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
}
.specials-tile span,
.specials-tile2 span {
font-size: 4vw;
}
.text1,
.text2 {
font-size: 3vw;
margin: 15px;
}
.text-center span {
font-size: 4vw;
}
/***********CONTACT SIDE*********/
.head-text span {
font-size: 4vw;
}
}
/********** Super extra small devices Only :-) (e.g., iPhone 4) **********/
#media (max-width: 479px) {
/* Header */
#nav-list a {
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
background-color: #ffeee6;
border: 2px solid #ffffff;
margin-top: 6px;
margin-bottom: 3px;
}
.navbar-nav {
margin: 0px;
margin-top: 3px;
margin-left: -3px;
}
.navbar-brand h1 {
font-size: 6vw;
margin-left: 10px;
}
#nav-list a {
font-size: 5vw;
}
/*Home Page*/
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
}
.navbar-brand span {
font-size: 4vw;
color: #4d0000;
}
#menu-tile span,
#specials-tile span,
#map-tile span {
font-size: 5vw;
}
#logo-img {
background: url('../images/sm.png') no-repeat;
}
/*Footer*/
.panel-footer {
font-size: 5vw;
}
#hours span,
#address span,
#sentence span {
font-size: 6vw;
}
/***********MENU SIDE*********/
.category-tile span {
font-size: 6vw;
}
#menu-title {
font-size: 6vw;
}
span {
font-size: 5vw;
}
/***********COFEE CATEGORY SIDE*********/
.coffee-position span {
font-size: 6vw;
}
.coffee-price {
font-size: 6vw;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position span {
font-size: 7vw;
}
.sweet-price {
font-size: 6vw;
}
/***********SPECIALS SIDE*********/
.specials-tile {
background: url('../images/bday 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
margin-bottom: 10px;
}
.specials-tile2 {
background: url('../images/catering 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
}
.specials-tile span,
.specials-tile2 span {
font-size: 6vw;
}
.text1,
.text2 {
font-size: 5vw;
margin: 15px;
}
.text-center span {
font-size: 5vw;
}
/***********CONTACT SIDE*********/
.head-text span {
font-size: 6vw;
}
/********** Super EXTRA (created by me) extra small devices Only :-)**********/
#media (max-width: 423px) {
/* Header */
#nav-list a {
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
background-color: #ffeee6;
border: 2px solid #ffffff;
margin-top: 6px;
margin-bottom: 3px;
}
.navbar-nav {
margin: 0px;
margin-top: 3px;
margin-left: -3px;
}
.navbar-brand h1 {
font-size: 7vw;
}
#nav-list a {
font-size: 6vw;
}
#logo-img {
background: url('../images/sm.png') no-repeat;
width: 150px;
height: 54px;
}
.navbar-brand span {
font-size: 4vw;
color: #4d0000;
}
/*Home Page*/
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
}
#menu-tile span,
#specials-tile span,
#map-tile span {
font-size: 5vw;
}
/*Footer*/
.panel-footer {
font-size: 5vw;
}
#hours span,
#address span,
#sentence span {
font-size: 6vw;
}
/***********MENU SIDE*********/
.category-tile span {
font-size: 6vw;
}
#menu-title {
font-size: 6vw;
}
span {
font-size: 5vw;
}
/***********COFEE CATEGORY SIDE*********/
.coffee-position span {
font-size: 6vw;
}
.coffee-price {
font-size: 5vw;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position span {
font-size: 7vw;
}
.sweet-price {
font-size: 5vw;
}
/***********SPECIALS SIDE*********/
.specials-tile {
background: url('../images/bday 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
margin-bottom: 10px;
}
.specials-tile2 {
background: url('../images/catering 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
}
.specials-tile span,
.specials-tile2 span {
font-size: 6vw;
}
.text1,
.text2 {
font-size: 5vw;
margin: 15px;
}
.text-center span {
font-size: 5vw;
}
/***********CONTACT SIDE*********/
.head-text span {
font-size: 6vw;
}
}
<!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>responsive design - coffee corner</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Mirza:400,500,600,700" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="pull-left visible-xs visible-sm visible-md visible-lg">
<div id="logo-img"></div>
</a>
<div class="navbar-brand">
<a href="index.html">
<h1>coffee corner</h1><span> Magdalena Dering ©<br> RWD</span></a>
</div>
<button id="navbarToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li id="navMenuButton">
<a href="menu.html " onclick="$dc.loadMenuCategories();">
<span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> menu</a>
</li>
<li>
<a href="specials.html">
<span class="glyphicon glyphicon-star-empty"></span><br class="hidden-xs"> specials</a>
</li>
<li>
<a href="contact.html">
<span class="glyphicon glyphicon-envelope"></span><br class="hidden-xs"> contact</a>
</li>
</ul>
<!-- #nav-list -->
</div>
<!-- .collapse .navbar-collapse -->
</div>
<!-- .container -->
</nav>
<!-- #header-nav -->
</header>
<div id="main-content" class="container">
<div class="jumbotron">
<img src="images/coffee-wallpapers-768.jpg" alt="Picture of restaurant" class="img-responsive visible-xs">
</div>
</div>
<div class="row"></div>
<div id="home-tiles" class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="menu.html">
<div id="menu-tile"><span>menu</span></div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="specials.html">
<div id="specials-tile"><span>specials</span></div>
</a>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<a href="https://www.google.pl/maps/place/1211+6th+Ave,+New+York,+NY+10036,+Stany+Zjednoczone/#40.7586101,-73.9841164,17z/data=!3m1!4b1!4m5!3m4!1s0x89c258ff14d2b811:0x3569ce18f2731425!8m2!3d40.7586101!4d-73.9819277" target="_blank">
<div id="map-tile">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.155246285712!2d-73.98411638459368!3d40.75861007932681!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c258ff14d2b811%3A0x3569ce18f2731425!2s1211+6th+Ave%2C+New+York%2C+NY+10036%2C+Stany+Zjednoczone!5e0!3m2!1spl!2spl!4v1482304685186"
width=315 height="280" frameborder="0" style="border:0" allowfullscreen></iframe>
<span>map</span>
</div>
</a>
</div>
</div>
<!-- End of #home-tiles -->
</div>
<!-- End of #main content -->
<footer class="panel-footer">
<div class="container">
<div class="row">
<section id="hours" class="col-sm-4">
<span><b>hours:</b><br></span> monday - friday: 11am- 8pm<br> saturday - sunday: 10am - 9pm<br>
<hr class="visible-xs">
</section>
<section id="address" class="col-sm-4">
<span><b>address:</b><br></span> 1211 6th Ave, New York<br> NY 10036
<hr class="visible-xs">
</section>
<section id="sentence" class="col-sm-4">
<span><b>quots:</b><br></span><i>
“Let me wake up next to you, have coffee in the morning and wander through<br>the city with your hand in mine, and I'll be happy for the rest of my fucked<br> up little life.”</i><br> ― Charlotte Eriksson
<hr class="visible-xs">
</section>
</div>
</div>
</footer>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Best,
Megi

add background for 760 media without url & height 100% to your custom style css
#media (max-width: 767px) {
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
background: url('');
height: 100%;
}
}

(De-)activating navbar items in Bootstrap

I'm trying to change the background colour of a navbar item upon click by setting it active. The menu item corresponding to the left page should be deactivated, i.e. its background colour should be set back to normal.
There are two problems:
When using data-toggle="pill", the href does not work anymore (therefore I left it out)
Remembering the previous page is not working because the global variable previousID is not overwritten. As a consequence, the previously selected menu item is not deactivated.
Here's the code:
var previousID = "navbar-index";
$("li").click(function() {
var currentID = $(this).attr("id");
alert("current ID: " + currentID);
document.getElementById(currentID).setAttribute('class', 'active');
alert("previous ID: " + previousID);
document.getElementById(previousID).removeAttribute('class', 'active');
previousID = currentID;
});
/*.dropdown:hover .dropdown-menu {
display: block;
}*/
h4,
h5,
h6,
h1,
h2,
h3 {
margin-top: 0;
}
ul,
ol {
margin: 0;
}
p {
margin: 0;
font-weight: 300;
}
html,
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 100%;
background-color: #FFF;
color: #777;
}
body a {
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.header {
background: #fff;
padding: 2em 0;
border-top: 3px solid #2ABB9B;
border-bottom: 3px solid #2ABB9B;
}
.navbar-brand {
font-size: 32px;
font-weight: 700;
color: #444;
letter-spacing: -1px;
padding: 5px;
}
.navbar-brand:hover {
color: #3e897a;
}
.navbar-brand .fa {
color: #2abb9b;
}
.menu {
float: right;
}
.menu li {
display: inline-block;
}
.menu li:first-child {
margin-left: 0;
}
.menu li a {
display: block;
font-size: 1em;
color: #777;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
}
#nav .current a {
color: #2ABB9B;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.menu li a:hover {
/*color: #94ddcd;*/
color: #104a3e;
/*background: #fff !important;*/
background: #a9e3d7 !important;
}
.menu li.active a {
color: #000000;
/*background: #fff !important;*/
background: #ff0000 !important;
}
.toggleMenu {
display: none;
padding: 4px 5px 0px 5px;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-o-border-radius: 2em;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
}
#media screen and (max-width: 800px) {
.menu {
margin: 10px 0;
}
.active {
display: block;
}
.menu li a {
text-align: left;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
}
.nav {
list-style: none;
*zoom: 1;
width: 95%;
position: absolute;
right: 10px;
background: #051619;
top: 86px;
z-index: 9999;
border: 1px solid #B11D1D;
}
.menu li a span {
text-align: center;
top: 15px;
}
.nav li ul {
width: 100%;
}
.menu ul {
margin: 0;
}
.nav > li.hover > ul {
width: 100%;
}
.nav > li {
float: none;
display: block;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul,
.nav li li.hover ul {
position: static;
}
.nav li a {
border-top: 1px solid #B11D1D;
background: #fff;
}
.nav li:first-child a {
border-top: none;
}
}
.banner {
background: url(../images/banner.jpg) no-repeat center;
min-height: 500px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-bottom: 100px;
}
.banner-info {
margin-top: 8em;
}
.banner-info h1 {
font-size: 3em;
color: #eee;
line-height: 1.4em;
margin: 0em;
font-weight: 500;
}
.banner-info p {
color: #ddd;
font-size: 1.2em;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
line-height: 1.8em;
margin-top: 1em;
}
.content_white {
text-align: center;
padding: 3em 0;
}
.content_white h2 {
font-size: 2em;
font-weight: 500;
}
.content_white p {
color: #777;
font-size: 1.2em;
font-weight: 300;
line-height: 0.6em;
}
.featured_content {
background: #2ABB9B;
}
.feature_grid1 {
width: 23.5%;
margin-right: 2em;
border-right: 1px solid #5fccb4;
padding: 4em 2em 4em 0;
}
.feature_grid2 {
width: 21%;
padding: 4em 0;
}
.feature_grid1 .fa,
.feature_grid2 .fa {
color: #e5e52d;
}
h3.m_1 {
padding: 0.8em 0;
margin: 0;
}
h3.m_1 a {
font-size: 1.1em;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px #4ca390;
}
h3.m_1 a:hover {
color: #e5e52d;
}
p.m_2 {
color: #e9f8f5;
font-size: 1em;
line-height: 1.5em;
margin-bottom: 1em;
font-weight: 300;
}
.banner_btn {
display: inline-block;
padding: 6px 20px;
font-size: 1em;
cursor: pointer;
background: #2ABB9B;
color: #fff;
font-weight: 500;
text-decoration: none;
outline: none;
margin-top: 30px;
border-radius: 5px;
}
.banner_btn:hover {
background: #22967c;
color: #fff;
text-decoration: none;
}
.feature_btn {
display: inline-block;
padding: 6px 20px;
font-size: 1em;
cursor: pointer;
background: #5fccb4;
color: #fff;
font-weight: 500;
text-decoration: none;
outline: none;
margin-top: 10px;
border-radius: 5px;
}
.feature_btn:hover {
background: #e5e52d;
color: #555;
text-decoration: none;
}
.nbs-flexisel-container {
position: relative;
max-width: 100%;
}
.nbs-flexisel-ul {
position: relative;
width: 9999px;
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}
.nbs-flexisel-inner {
overflow: hidden;
margin: 3em 0;
}
.nbs-flexisel-item {
float: left;
margin: 0px;
padding: 0px;
cursor: pointer;
position: relative;
line-height: 0px;
padding-right: 30px;
}
.nbs-flexisel-item > img {
cursor: pointer;
position: relative;
}
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
width: 30px;
height: 30px;
position: absolute;
cursor: pointer;
z-index: 100;
margin-top: -8.6em;
}
.nbs-flexisel-nav-left {
left: 32.5em;
background: url(../images/img-sprite.png) no-repeat -99px -101px;
}
.nbs-flexisel-nav-right {
right: 35em;
background: url(../images/img-sprite.png) no-repeat -133px -102px;
}
a:focus {
outline: 0px;
}
.fa {
color: #2ABB9B;
}
.footer_bottom {
padding: 2em 0;
background: #2ABB9B;
}
.copy {
text-align: center;
}
.copy p {
font-size: 1em;
color: #fff;
}
.copy p a {
color: #fff;
border-bottom: 1px dotted;
}
.copy p a:hover {
color: #e5e52d;
border-bottom: 1px solid;
text-decoration: none;
}
.about {
background: #555;
margin-bottom: 4em;
background: url(../images/title-bg.jpg) center no-repeat;
background-size: cover;
height: 180px;
}
.title-section {
position: relative;
padding-top: 60px;
padding-right: 0;
padding-left: 0;
padding-bottom: 20px;
}
.title-section h1 {
margin: 0 0 5px 0;
line-height: 58px;
font-size: 34px;
font-weight: 500;
color: #555;
}
.title-section ul {
background: none;
position: relative;
margin: 0;
padding: 9px 0 10px 0;
border-top: 1px solid #597275;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.title-section ul li {
line-height: 18px;
font-size: 13px;
color: #5f6775;
}
.title-section ul li a {
color: #fff;
}
h3.m_2 {
font-size: 1.7em;
font-weight: 500;
color: #666;
margin-bottom: 1em;
}
.service_box {
padding-bottom: 50px;
}
.service_box .fa {
color: #2ABB9B;
}
.service_box h2 {
font-size: 1.6em;
color: #5d5f60;
padding-top: 0.3em;
padding-right: 0;
padding-left: 0;
padding-bottom: 0.5em;
}
.service_box h5 a {
font-size: 16px;
color: #555;
margin-bottom: 1em;
line-height: 1.5em;
}
.service_box h5 a:hover {
text-decoration: none;
color: #e4551d;
}
.service_box p {
font-size: 1em;
color: #777;
margin-bottom: 1.4em;
line-height: 1.6em;
text-align: left;
}
.about-info {
padding: 4em 0;
}
.about-info h2 {
padding-bottom: 20px;
}
.about-info h3,
.about_content h3 {
padding-bottom: 20px;
}
.about_content {
padding: 1em 0 4em 0;
}
.about_content img {
padding: 0 20px 20px 0;
float: left;
}
.highlight-info {
background: url(../images/lab.jpg) center fixed;
background-size: cover;
color: #fff;
padding: 6em 0;
}
.highlight-info h4 {
color: #fff;
margin: 0.5em 0 0 0;
}
.testimonial-solid {
padding-top: 50px;
padding-right: 0;
padding-left: 0;
padding-bottom: 70px;
margin: 0 0 0 0;
background: #fff;
text-align: center;
}
.carousel-indicators {
bottom: -40px;
}
.carousel-indicators li {
border: 1px solid #ccc;
}
.carousel-indicators .active {
background-color: #ccc;
margin-right: 4px;
}
.testimonial-solid h2 {
font-size: 2em;
font-weight: 500;
padding-bottom: 20px;
}
.testimonial-solid p {
font-size: 1em;
line-height: 30px;
}
#accordion-alt3 .panel-heading h4 {
font-size: 14px;
line-height: 28px;
}
.panel .panel-heading h4 {
font-weight: 400;
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 15px;
color: inherit;
}
.panel-group .panel {
margin-bottom: 0;
border-radius: 2px;
}
.panel {
margin-bottom: 18px;
background-color: #F4F4F4;
border: 1px solid transparent;
border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
#accordion-alt3 .panel-heading h4 a i {
font-size: 16px;
line-height: 18px;
width: 18px;
height: 18px;
margin-right: 5px;
color: #2ABB9B;
text-align: center;
border-radius: 50%;
margin-left: 6px;
}
.follow-us {
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
}
.social-icon {
padding-top: 6px;
font-size: 16px;
text-align: center;
width: 32px;
height: 32px;
border: 2px solid #d5f1eb;
border-radius: 50%;
color: #d5f1eb;
margin: 5px;
}
a.social-icon:hover,
a.social-icon:active,
a.social-icon:focus {
text-decoration: none;
color: #e5e52d;
border-color: #e5e52d;
}
.contact {
padding-top: 1em;
padding-right: 0;
padding-left: 0;
padding-bottom: 4em;
}
.contact_top {
margin-right: 0;
margin-left: 0;
margin-bottom: 4em;
}
.contact_details {
background-color: #f6f6f6;
padding: 20px;
border-left: 2px solid #fff;
}
.contact_details h5 {
font-size: 1.2em;
font-weight: 500;
color: #666;
margin-bottom: 1em;
}
.contact_address,
.contact_mail {
overflow: hidden;
font-size: 1em;
color: #777;
line-height: 1.5em;
}
.contact_bottom h3 {
font-size: 1.5em;
font-weight: 500;
color: #666;
}
.contact_bottom p {
font-size: 1em;
line-height: 1.8em;
color: #888;
margin: 1em 0;
}
.contact-to input[type="text"] {
padding: 10px 10px;
width: 32.5%;
margin: 10px 0;
border: 1px solid #E1E2E2;
color: #999;
background: #FFF;
float: left;
outline: none;
font-size: 0.85em;
}
.text2 input[type="text"],
.text2 textarea {
width: 99%;
margin: 10px 0;
border: 1px solid #E1E2E2;
color: #999;
outline: none;
margin-bottom: 25px;
height: 150px;
padding: 10px 10px;
font-size: 0.85em;
resize: none;
}
.submit {
margin-top: 2em;
display: inline-block;
padding: 8px 20px;
font-size: 1em;
cursor: pointer;
border: none;
background: #2ABB9B;
color: #fff;
text-decoration: none;
outline: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
-o-transition: all 0.3s;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
}
.submit:hover {
text-decoration: none;
background: #22967c;
color: #fff;
}
#media (max-width: 1024px) {
.feature_grid1 {
width: 23%;
}
.banner {
min-height: 450px;
}
.banner-info {
margin-top: 4em;
}
.nbs-flexisel-nav-right {
right: 30em;
}
.nbs-flexisel-nav-left {
left: 29em;
}
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
margin-top: -7.6em;
}
}
#media (max-width: 800px) {
.header {
padding: 1em 0;
}
.feature_grid1 {
width: 100%;
padding: 4em 0em 0em 0;
}
.banner-info h1 {
font-size: 2em;
}
.banner {
min-height: 400px;
}
.feature_grid2 {
width: 100%;
}
.nbs-flexisel-nav-right {
right: 23em;
}
.nbs-flexisel-nav-left {
left: 22em;
}
.banner-info p {
font-size: 0.85em;
}
.toggleMenu {
padding: 0;
}
.service_box {
margin-bottom: 2em;
}
.contact_details {
margin-bottom: 2em;
}
.contact-to input[type="text"] {
width: 32%;
}
}
#media (max-width: 640px) {
.content_white p {
font-size: 1.3em;
}
.nbs-flexisel-nav-left {
left: 18.5em;
}
.nbs-flexisel-nav-right {
right: 18.5em;
}
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
margin-top: -5.8em;
}
.service_box h2 {
margin-bottom: 0.5em;
}
}
#media (max-width: 480px) {
.banner {
min-height: 250px;
}
.banner-info h1 {
font-size: 1.5em;
}
.banner-info p {
font-size: 0.8125em;
}
.banner-info {
margin-top: 2em;
}
.header {
padding: 0.5em 0;
}
.content_white h2 {
font-size: 1.5em;
}
.content_white p {
font-size: 1em;
}
.nbs-flexisel-nav-right {
right: 13.5em;
}
.nbs-flexisel-nav-left {
left: 13.5em;
}
.contact-to input[type="text"] {
width: 31%;
}
.nav {
top: 70px;
}
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
margin-top: -5em;
}
}
#media (max-width: 320px) {
.banner-info h1 {
font-size: 1.2em;
}
.banner-info p {
font-size: 12px;
}
.banner {
min-height: 150px;
}
.content_white p {
font-size: 0.95em;
line-height: 1em;
padding: 0 10px;
}
.content_white h2 {
font-size: 1.3em;
}
.nbs-flexisel-nav-right {
right: 8.5em;
}
.nbs-flexisel-nav-left {
left: 8.5em;
}
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
margin-top: -4.2em;
}
h3.m_1 {
padding: 0.5em 0;
}
.contact-to input[type="text"] {
width: 99%;
}
input.text {
margin-left: 0 !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="container">
<a class="navbar-brand" href="index.html">
BRAND
</a>
<div class="menu">
<a class="toggleMenu" href="#">
<img src="images/nav_icon.png" alt="" />
</a>
<ul class="nav" id="nav">
<li id="navbar-home" class="current">Home
</li>
<!--<li id="navbar-services">Services</li>-->
<li id="navbar-services">Services
</li>
<li id="navbar-photos">Photos
</li>
<li id="navbar-services">
<a href="test.html" </a>
</li>
<div class="clear"></div>
</ul>
</div>
</div>
</div>

I have solved this problem by generating and inserting javascript code by using a tiny python script.
Each html file now features the lines below to set its corresponding navbar element active. The ID refers to the ID which I have assigned to an li element
inside the list of navbar elements (check the code above).
<script type="text/javascript">
document.getElementById('navbar-services').setAttribute('class', 'active');
</script>
However, I don' manually add these lines to each file, but instead wrote a python script to automatically insert recurring elements such as the menu bar, a footer, imports etc. by detecting instructions such as
<!-- #REPLACEWITH imports.html -->
<!-- #REPLACEWITH navbar.html -->
My script uses the processed file's name and autogenerates the javascript code for the specific context.
The critical lines for this particular problem are:
comment = (line[4:len(line)-4]).strip(); # detects an assignment to insert/generate code
if comment.startswith(token):
path = SRC_INCL+'/'+(comment[len(token):]).strip();
with open(path, 'r') as f:
lineArr=f.read().splitlines();
for repLine in lineArr:
print repLine
if path[path.rfind('/')+1:path.find(".html")] == 'navbar':
name = file[file.rfind(os.sep)+1:file.find(".html")];
print "<script type=\"text/javascript\">"
print "document.getElementById('navbar-"+name+"').setAttribute('class', 'active');"
print "</script>"
It works like a charm for my purpose and is easily extendible