We Keep Coding

When I hide an element and show another one, other divs move. How to stop this?

I have made a page with a div that gets replaced by a different div when a button is clicked. Both of them have similar properties but when I click the button some other elements move. For some reason, when the div that replaces the first div's height is smaller than the page height, no other divs are moved, but when the div height is larger than the page, it does move other elements
Nothing moves when the middle section fits on the page:
I will show you what I mean here:
When the middle section doesn't fit on the page some elements are moved left:
Please open in full screen to see:
function showResults() {
document.getElementById("inputSection").style.display = "none";
document.getElementById('hideButton').style.display = "none";
document.getElementById("Calories").style.display = "block";
document.getElementById("Protein").style.display = "block";
document.getElementById("Carbs").style.display = "block";
}
#import "calorie-calculator.css";
.banner {
/* Banner Styles */
width: 100%;
color: black;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 24px;
float: left;
text-decoration: none;
cursor: pointer;
}
html,
body {
max-width: 100%;
overflow-x: hidden;
}
.noselect {
/* No Highlighting */
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Old versions of Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
.banner-head-1 {
/* Home Header */
float: left;
overflow-wrap: normal;
margin-left: 200px;
margin-right: 200px;
text-decoration: none;
color: black;
display: block;
}
.banner-head-2 {
/* Food Header */
float: left;
overflow-wrap: normal;
margin-left: 55px;
text-decoration: none;
color: black;
display: block;
}
.banner-head-3 {
/* Exercise Header */
float: left;
overflow-wrap: normal;
margin-left: 55px;
text-decoration: none;
color: black;
display: block;
}
.banner-head-4 {
/* Calculators Header */
float: left;
overflow-wrap: normal;
margin-left: 55px;
text-decoration: none;
color: black;
display: block;
}
.banner-head-5 {
/* Calculators Header */
float: left;
overflow-wrap: normal;
margin-left: 55px;
text-decoration: none;
color: black;
display: block;
}
.dropdown {
/* Dropdown Content */
cursor: pointer;
color: black;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 24px;
display: none;
position: absolute;
width: 100%;
float: left;
text-decoration: none;
padding-right: 80px;
margin: 0px;
border: 0px;
}
.noDecoration {
/* No Text Decoration */
text-decoration: none;
color: black;
}
.dropdown-content {
display: none;
padding-left: 20px;
}
.banner-logo {
height: 40px;
border: 10px solid white;
border-radius: 12px;
margin-top: 5px;
}
.banner-logo-responsive {
margin-left: 150px;
height: 43px;
margin-top: 5px;
margin-bottom: 5px;
border: 10px solid white;
border-radius: 12px;
margin-left: 350px;
}
.mobile-logo {
height: 80px;
padding: none;
border: 10px white solid;
border-radius: 8px;
}
.main-section {
padding-top: 79px;
padding-left: 500px;
width: 903px;
font-family: 'Anton', sans-serif;
display: block;
object-fit: cover;
}
.background {
float: left;
position: fixed;
top: 0px;
left: 0px;
}
.wholeArea {
position: absolute;
height: auto;
top: 0;
right: 0;
}
.title {
font-size: 60px;
color: #132c54;
padding-bottom: 10px;
}
.description {
font-size: 25px;
color: #2569c8;
line-height: 29px;
margin-bottom: 8px;
}
.inputText {
font-size: 30px;
color: #132c54;
background-color: white;
}
.inputField {
font-size: 30px;
color: #132c54;
border-color: #132c54;
border-width: 4px;
border-style: solid;
outline-color: #132c54;
border-radius: 6px;
}
.noDecoration {
/* No Text Decoration */
text-decoration: none;
color: #132c54;
}
.selectInput {
width: 413px;
color: #132c54;
outline-color: #132c54;
outline-width: 0px;
border-color: #132c54;
border-width: 4px;
border-style: solid;
border-radius: 6px;
}
.textInput {
width: 400px;
display: inline;
color: #132c54;
outline-color: #132c54;
outline-width: 0px;
border-color: #132c54;
border-width: 4px;
border-style: solid;
border-radius: 6px;
padding-left: 3px;
}
.selectOption {
font-size: 30px;
color: #132c54;
}
.buttonStyle {
font-size: 35px;
color: #132c54;
background-color: white;
outline-color: #132c54;
outline-width: 0px;
border-color: #132c54;
border-width: 4px;
border-style: solid;
border-radius: 6px;
}
.buttonToggleStyle {
font-size: 25px;
color: #132c54;
background-color: white;
outline-color: #132c54;
outline-width: 0px;
border-color: #132c54;
border-width: 4px;
border-style: solid;
border-radius: 6px;
margin-right: 20px;
}
.radioStyle {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: top;
}
.leftColumnBox {
position: absolute;
margin-right: 100px;
width: auto;
height: auto;
}
.leftColumnBox2 {
position: absolute;
margin-top: 321px;
margin-right: 100px;
width: auto;
height: auto;
}
.rightColumnBox {
position: absolute;
margin-right: 100px;
width: auto;
height: auto;
}
.rightColumnBox2 {
position: absolute;
margin-top: 321px;
margin-right: 100px;
width: auto;
height: auto;
}
.leftColumn {
width: auto;
height: auto;
margin-top: 81px;
margin-left: 100px;
margin-right: 100px;
float: left;
position: fixed;
display: inline;
top: 0px;
left: 0px;
}
.rightColumn {
width: auto;
height: auto;
margin-top: 81px;
margin-left: 100px;
margin-right: 400px;
float: left;
position: fixed;
display: inline;
top: 0px;
right: 0px;
}
.advertImage {
border: 10px white solid;
border-radius: 6px;
width: 300px;
height: auto;
}
.resultsSection {
display: none;
position: inherit;
}
.radioArea {
height: 45px;
width: 700px;
display: block;
}
.inputArea {
height: 50px;
width: 700px;
display: block;
}
.labelText {
width: 150px;
display: inline-block;
}
.resultsText {
line-height: 38px;
}
.resultsHeaderText {
line-height: 40px;
padding: 0px;
border: 0px;
margin: 0px;
margin-bottom: 10px;
}
.hideInput {
display: block;
}
.mainBorder {
border: 20px solid white;
border-radius: 12px;
background-color: white;
}
.titleBorder {
border: 20px solid white;
border-bottom: none;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
background-color: white;
}
.descBorder {
border: 20px solid white;
border-top: none;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
background-color: white;
}
.tabContent {
display: none;
margin-bottom: 8px;
}
.tabSwitch {
margin-bottom: 8px;
}
#media screen and (min-width: 1920px) {
/* Responsive */
.main-section {
padding-top: 79px;
padding-left: 27%;
padding-right: 0px;
width: 47%;
}
}
#media screen and (max-width: 1920px) {
.main-section {
padding-top: 79px;
padding-left: 27%;
padding-right: 0px;
width: 47%;
}
}
#media screen and (min-width: 1920px) {
/* Responsive */
.banner-head-1 {
/* Home Header */
margin-left: 170px;
margin-right: 200px;
}
.banner-head-2 {
/* Food Header */
margin-left: 55px;
}
.banner-head-3 {
/* Exercise Header */
margin-left: 55px;
}
.banner-head-4 {
/* Calculators Header */
margin-left: 55px;
}
.banner-head-5 {
/* Calculators Header */
margin-left: 55px;
}
}
#media screen and (max-width: 1920px) {
.banner-head-1 {
/* Home Header */
margin-left: 170px;
margin-right: 200px;
}
.banner-head-2 {
/* Food Header */
margin-left: 55px;
}
.banner-head-3 {
/* Exercise Header */
margin-left: 55px;
}
.banner-head-4 {
/* Calculators Header */
margin-left: 55px;
}
.banner-head-5 {
/* Calculators Header */
margin-left: 55px;
}
}
<!DOCTYPE html>
<html>
<head>
<script src="./script/banner.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style/banner.css">
<link rel="stylesheet" href="./style/calorie-calculator.css">
<link rel="stylesheet" href="./style/css-reset.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
</head>
<div id="background" class="background"></div>
<span class="wholeArea">
<table class="banner noselect"> <!-- Banner -->
<tr>
<th class="banner-head-1">img</th>
<th class="banner-head-2">img</th>
<th class="banner-head-3">img</th>
<th class="banner-head-4">img</th>
<th class="banner-head-5">img</th>
</tr>
</table>
<div class="main-section noDecoration">
<div> <!-- Title -->
<p class="title titleBorder">CALORIE CALCULATOR</p> <!-- Title -->
<p class="description descBorder">This calculator will estimate how many calories your body needs to consume based on your weight, height and age and other factors. This is also a guide to maintain, gain or lose weight</p><!-- Description -->
</div>
<div class="mainBorder calculatorSection" id="inputSection"> <!-- Calculator -->
<div class="radioArea" style="padding-bottom: 5px;" id="input1">
<label class="inputText noDecoration labelText">Units</label>
<a href="./calorie-calculator.html">
<input type="radio" class="inputField radioStyle" onclick="window.location='./calorie-calculator.html'">
<label class="inputText noDecoration">Metric</label>
</a>
<a href="./calorie-calculator-imperial.html">
<input type="radio" class="inputField radioStyle" onclick="window.location='./calorie-calculator-imperial.html'">
<label class="inputText noDecoration">Imperial</label><br>
</a>
</div>
<div class="radioArea" id="input2">
<label for="gender" class="inputText labelText">Gender</label>
<input type="radio" id="Male" name="gender" value="5" class="inputField radioStyle">
<label for="Male" class="inputText">Male</label>
<input type="radio" id="Female" name="gender" value="-165" class="inputField radioStyle">
<label for="Female" class="inputText">Female</label><br>
</div>
<div class="inputArea" id="input3">
<label for="Input1" class="inputText labelText">Age</label>
<input type="number" id="Input1" class="inputField textInput" placeholder="12-80"><br>
</div>
<div class="inputArea" id="input4">
<label for="Input2" class="inputText labelText">Height</label>
<input type="number" id="Input2" class="inputField textInput" placeholder="100cm - 200cm"><br>
</div>
<div class="inputArea" id="input5">
<label for="Input3"class="inputText labelText">Weight</label>
<input type="number" id="Input3" class="inputField textInput" placeholder="30kg - 120kg"><br>
</div>
<div class="inputArea" id="input6">
<label for="exerciseInput"class="inputText labelText">Exercise</label>
<select id="exerciseInput" class="inputText selectInput">
<option class="inputText selectOption">Exercise</option>
<option value="noExercise" id="noExercise" class=" selectOption">Inactive</option>
<option value="lightExercise" id="lightExercise" class=" selectOption">Light Activity</option>
<option value="moderateExercise" id="moderateExercise" class=" selectOption">Moderate Activity</option>
<option value="activeExercise" id="activeExercise" class=" selectOption">Active</option>
<option value="veryActiveExercise" id="veryActiveExercise" class=" selectOption">Very Active</option>
<option value="extraActiveExercise" id="extraActiveExercise" class=" selectOption">Extra Active</option>
</select>
</div>
<button class="buttonStyle" onclick="showResults();" id="hideButton">ADD</button>
</div>
<div id="Calories" class="tabContent mainBorder">
<div class="resultsHeaderText">Calories</div>
<div class="resultsText">Extreme Weight Gain(1kg/week) - <span id="extremeGain1" class=""></span></div>
<div class="resultsText">Weight Gain(0.5kg/week) - <span id="averageGain1" class=""></span></div>
<div class="resultsText">Mild Weight Gain(0.25kg/week) - <span id="mildGain1" class=""></span></div>
<div class="resultsText">Maintain Calories - <span id="maintain1" class=""></span></div>
<div class="resultsText">Mild Weight Loss(0.25kg/week) - <span id="mildLoss1" class=""></span></div>
<div class="resultsText">Weight Loss(0.5kg/week) - <span id="averageLoss1" class=""></span></div>
<div class="resultsText">Extreme Weight Loss(1kg/week) - <span id="extremeLoss1" class=""></span></div>
</div>
<div id="Protein" class="tabContent mainBorder">
<div class="resultsHeaderText">Protein</div>
<div class="resultsText">Extreme Weight Gain(1kg/week) - <span id="extremeGain2" class=""></span></div>
<div class="resultsText">Weight Gain(0.5kg/week) - <span id="averageGain2" class=""></span></div>
<div class="resultsText">Mild Weight Gain(0.25kg/week) - <span id="mildGain2" class=""></span></div>
<div class="resultsText">Maintain Calories - <span id="maintain2" class=""></span></div>
<div class="resultsText">Mild Weight Loss(0.25kg/week) - <span id="mildLoss2" class=""></span></div>
<div class="resultsText">Weight Loss(0.5kg/week) - <span id="averageLoss2" class=""></span></div>
<div class="resultsText">Extreme Weight Loss(1kg/week) - <span id="extremeLoss2" class=""></span></div>
</div>
<div id="Carbs" class="tabContent mainBorder">
<div class="resultsHeaderText">Carbs</div>
<div class="resultsText">Extreme Weight Gain(1kg/week) - <span id="extremeGain3" class=""></span></div>
<div class="resultsText">Weight Gain(0.5kg/week) - <span id="averageGain3" class=""></span></div>
<div class="resultsText">Mild Weight Gain(0.25kg/week) - <span id="mildGain3" class=""></span></div>
<div class="resultsText">Maintain Calories - <span id="maintain3" class=""></span></div>
<div class="resultsText">Mild Weight Loss(0.25kg/week) - <span id="mildLoss3" class=""></span></div>
<div class="resultsText">Weight Loss(0.5kg/week) - <span id="averageLoss3" class=""></span></div>
<div class="resultsText">Extreme Weight Loss(1kg/week) - <span id="extremeLoss3" class=""></span></div>
</div>
</div>
<div class="leftColumn">
<div class="leftColumnBox"><img src="./img/advert-1.png" class="advertImage"></div>
<div class="leftColumnBox2"><img src="./img/advert-2.png" class="advertImage"></div>
</div>
<div class="rightColumn">
<div class="rightColumnBox"><img src="./img/advert-3.png" class="advertImage"></div>
<div class="rightColumnBox2"><img src="./img/advert-4.png" class="advertImage"></div>
</div>
</span>
</html>

Instead of visibility: hidden, use display: none.
Instead of visibility: visible, use display: block.

Use visibility :
visibility: visible
visibility: hidden

JS Function Not Defined Chrome Extension Popup.js

I am trying to add this button On Codepen to my chrome extension, my HTML and CSS work perfectly fine. The JS is popup.js and is on the same level as the rest of the code, but it doesn't seem to be linked to the popup.html. Manifest is in the image . I did convert the SCSS to CSS using an online converter. I need help linking the js to popup.html so the button works as it does in Codepen.
Html, CSS & JS:
$('button.cooldown').click(function(){
var btn = $(this);
btn.prop('disabled', true);
setTimeout(function(){
btn.prop('disabled', false);
},15000);
});
body {
background-image: linear-gradient( 72.5deg, rgba(0,175,255,1) 27.9%, rgba(0,224,254,1) 84.2% );
width: 250px;
height: 400px;
}
#header {
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
background-color: #393e46;
color: white;
font-size: 15px;
border-radius: 10px;
}
.button {
background-color: rgb(80, 220, 100);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button_cancel {
background-color: #f44444;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button_cancel:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
/* The container */
.container {
display: block;
position: relative;
padding-left: 10px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
font-size: 18px;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=file], select {
padding-left: 15%;
}
.form-item {
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
}
.wallpaper-title {
display: block;
padding-bottom: 3px;
font-size: 11px;
}
button.cooldown {
background: #336699;
min-height: 48px;
min-width: 144px;
position: relative;
margin: 5px;
border-radius: 5px;
border: 0;
color: #fff;
padding: 0 15px;
font-size: 16px;
outline: none;
overflow: hidden;
cursor: pointer;
}
button.cooldown:active, button.cooldown:focus {
outline: none;
}
button.cooldown:disabled {
background: #264d73;
color: #d9d9d9;
cursor: default;
box-shadow: inset 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
}
button.cooldown:disabled:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
left: 0;
height: 5px;
background: #1a334d;
animation: cooldown 15s linear;
}
#keyframes cooldown {
0% {
width: 100%;
}
100% {
width: 0;
}
}
/* layout stuff */
section {
text-align: center;
margin-top: 100px;
color: #333;
}
p {
font-size: 12px;
}
<!doctype html>
<html>
<head>
<title>Home+</title>
<link rel="stylesheet" type="text/css" href="popup.css">
<script src="popup.js"></script>
<div id="header">
<h2>Home+</h2>
<h6>Settings</h6>
</div>
</head>
<body>
<!-- The settings pane, expand at will -->
<div class="tab-pane" id="settings">
<form class="settings">
<div class="form-item">
<label for="zip">Zip Code: </label>
<div class="form-item">
<input id="zip" name="zip" type="text" pattern="[0-9]*">
</div>
</div>
<div class="form-item">
<label class="container">Show Weather
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="form-item">
<button class="cooldown">Refresh Weather</button>
</div>
<div class="form-item">
<label for="hompagebg" class="wallpaper-title">Upload Wallpaper</label>
<center>
<input type="file" id="hompage-background" name="hompagebg" accept="image/png, image/jpeg" size="20">
</center>
</div>
<div class="form-item">
<button type="button" class="button">Save</button>
<button type="button" class="button_cancel">Cancel</button>
</div>
</form>
</div>
</div>
</body>
</html>

I needed to download jquery and link it to popup.html using and my JS code needed to be placed inside
$(document).ready(function () {
//code goes here
});

How to reset a placeholder whenever you exit a search box event?

I've got an overlay search box (check code). The search box got a placeholder "Sök", let's say the user writes something in the textbox but then exits (presses the x in the right upper corner). Then I want the text that the user wrote to be removed and the placeholder reset, so whenever the user enters the search box again the text is removed and the placeholder is back. How do I create this event?
Code:
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
span{
display: inline-block;
}
.backgroundlogo{
margin-top:-1400px;
z-index: -1;
position: relative;
width: 100%;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: none;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
.fa-bars:hover{
color: red;
cursor: pointer;
}
.wrapper{
position: relative;
height: 100%;
width: 100%;
}
.backgroundlogo{
}
.bild1{
height: 350px;
width: 600px;
margin-top: 100px;
margin-left: 80px;
position: absolute;
z-index: 4;
background-image: url('Img/KBA.jpg');
background-position: 10% 30% ;
background-size: 180%;
}
.bild2{
height: 350px;
width: 600px;
margin-top: 140px;
margin-left: 120px;
z-index: 3;
position:absolute;
background-color: #3D6BB8;
}
.entrytext{
float: right;
margin-right: 90px;
margin-top: 175px;
clear: both;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand{
height: 110px;
width: 750px;
margin: 600px auto;
background-color: #CFCFCF;
clear: both;
z-index: 11;
}
.openBtn {
background: #f1f1f1;
border: none;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
}
.openBtn:hover {
background: #bbb;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 10;
top: 0;
left: 0;
background-color: white;
background-color: rgba(255,255,255, 0.8);
}
.overlay-content {
position: relative;
top: 20%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: black;
}
.overlay .closebtn:hover {
color: #ccc;
}
.overlay input[type=text] {
padding: 15px;
font-size: 50px;
font-weight: bold;
border: none;
background:none;
margin: 0 auto;
text-decoration: none;
border-bottom: 6px solid black;
border-bottom-left-radius: 5px;
color:black;
text-align:center;
width: 100%;
}
input::placeholder {
color: black;
}
.overlay input[type=text]:hover {
background: none;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
input:focus {outline:0;}
.overlay button:hover {
background: #bbb;
}
.type1{
width: 1700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<div id="myOverlay" class="overlay">
<span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
<div class="overlay-content">
<form action="/action_page.php">
<input class="type1" id="type2" onblur="this.placeholder = 'Sök'" onfocus="this.placeholder = ''" type="text" placeholder="Sök" name="search">
</form>
</div>
</div>
<i onclick="openSearch()" id="openBtn" class="fas fa-search"></i>
<script>
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
document.addEventListener('keydown',function(){document.getElementById('type2').focus();});
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="bild1">
</div>
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div>
<div class="brand">
</div>
<span>
<img class="backgroundlogo" src="Img/bg.png" alt="">
</span>
</body>
</html>

If you set the value of the input back to nothing when the closing button is clicked, the placeholder should appear again:
const button = document.querySelector( 'button' );
const input = document.querySelector( 'input' );
button.addEventListener( 'click', event => {
input.value = '';
});
<input type="text" placeholder="Sok">
<button>Close</button>

Try with setValue('') method to reset any element value.

How to set multicolumn dropdown as such each drop down will use the same drop down frame?

I was required to program the following header ( the borders I've added
to know if it renders as I need to ):
"Select Project", "Select Item" and "Select Content" are dropdown elements.
Each one take 2 grids. I need that when clicking on the dropdown element, no matter which one, the drop down menu will take a width of 6 grids as shown above
in the blue frame.
( In other words, the drop down menu will be the same for all dropdown elements
but the content is different ).
In addition, when resizing to smaller screen, the media query doesn't work at all:
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) and (max-width : 1370px) {
.dropdown-menu.multi-column {
width: 765px !important;
}
}
What am I doing wrong here ?
HTML:
<!-- Layout Container-->
<div id="main-wrapper">
<!--Header - Top Bar Navigation-->
<header class="margin-left-right-20">
<div class="row top-bar">
<!-- Logo Image -->
<div class="col-md-1 col-lg-1 top-bar-margin-top border-div">
<img src="images/logo.png" id="logo" alt="logo" />
</div>
<!-- Application Indicator -->
<div class="col-md-1 col-lg-1 top-bar-margin-top border-div">
<a href="#">
<div>
<span class="top-bar-small-title">App</span>
<br />
<span class="top-bar-app-links" id="current-app-selected">App1</span>
</div>
</a>
</div>
<!-- Module (a.k.a Project) Selector -->
<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<div class="dropdown">
<a id="dLabel" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="top-bar-small-title make-it-regular">Project</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Project</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu multi-column" aria-labelledby="dLabel">
<div class="dropdown-menu multi-column">
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<ul class="dropdown-menu">
<li>Col 1 - Opt 1</li>
<li>Col 1 - Opt 2</li>
</ul>
</div>
<div class="span6">
<ul class="dropdown-menu">
<li>Col 2 - Opt 1</li>
<li>Col 2 - Opt 2</li>
</ul>
</div>
</div>
</div>
</div>
<!--<li>
<div class="row" style="width: 760px;">
<ul class="list-unstyled col-md-4">
<li>test1-1</li>
<li>test1-2</li>
<li>test1-3</li>
</ul>
<ul class="list-unstyled col-md-4">
<li>test2-1</li>
<li>test2-2</li>
<li>test2-3</li>
</ul>
<ul class="list-unstyled col-md-4">
<li>test3-1</li>
<li>test3-2</li>
<li>test3-3</li>
</ul>
</div>
</li>-->
<!--<li>Item 1</li>
<li>Item 2</li>-->
</ul>
</div>
</div>
<!-- Module (a.k.a Project) Selector -->
<!--<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<span class="top-bar-small-title make-it-regular">Module</span><br />
<span class="top-bar-app-links make-it-regular">Select Module</span>
</div>-->
<!-- Item Selector -->
<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<span class="top-bar-small-title make-it-regular">Item</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Item</span>
</div>
<!-- Block Selector -->
<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<span class="top-bar-small-title make-it-regular">Content</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Content</span>
</div>
<!-- Search Bar -->
<div class="col-md-2 col-lg-offset-1 col-lg-2 top-bar-margin-top border-div" id="div-search-bar">
<div class="input-group input-search col-md-12 col-lg-12 form-group">
<input type="text" class="form-control" name="q" id="search-bar" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default btn-search-custom" type="submit">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
<!-- Avatar user -->
<div class="col-md-1 col-lg-1 top-bar-margin-top border-div" id="div-avatar-circle">
<div class="avatar-circle col-lg-1">
</div>
<div class="show-user col-lg-8" style="display:inline-block">
<span class="show-user-name">Lionel Messi</span>
<span class="show-user-permission">Programmer</span>
</div>
</div>
</div>
<!-- End <div class="row top-bar">-->
</header>
</div>
CSS:
* {
padding: 0;
margin: 0;
/* height:100%;*/
}
.margin-left-right-20 {
margin-left: 20px;
margin-right: 20px;
}
.border-div {
border: solid 1px black;
}
.container {
margin-left: 20px;
margin-right: 20px;
width: 100%;
position: relative;
}
#logo {
width: 79px;
height: 42px;
margin-left: 26px;
}
.top-bar {}
.top-bar-margin-top {
margin-top: 43px;
/*padding: 0;*/
}
.top-bar-margin-top a:hover {
text-decoration: none;
}
.top-bar-small-title {
font-family: 'Lato', sans-serif;
font-size: 10px;
color: #2baab1;
}
.top-bar-app-links {
font-family: 'Lato', sans-serif;
font-size: 14px;
color: #2baab1;
}
#current-app-selected {
font-weight: bold;
}
#search-bar {
/*width: 325px;*/
width: 100%;
height: 29px;
}
/*#media only screen and (min-width: 1200px) and (max-width: 1368px) {
#search-bar{
width: 200px;
height: 29px;
}
}*/
/*#avatar-and-search-in-new-line {
display:none;
}*/
.make-it-regular {
color: #373d42;
}
input.search-query {
padding-left: 26px;
}
.input-group-btn:last-child {
border-radius: 500px;
}
.input-search .input-group-btn {
color: #ccc;
}
.input-group-icon .input-group-btn,
.input-search .input-group-btn {
border-radius: 500px;
width: 0;
left: -13%;
z-index: 1000;
}
.input-group-btn {
position: relative;
font-size: 0;
white-space: nowrap;
}
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
input-group-rounded input.form-control:first-child,
.input-group-rounded input.form-control:last-child,
.input-search input.form-control:first-child,
.input-search input.form-control:last-child {
border-radius: 500px;
}
.input-group-icon input.form-control:first-child,
.input-group-icon input.form-control:last-child,
.input-search input.form-control:first-child,
.input-search input.form-control:last-child {
border-radius: 25px;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group-rounded input.form-control,
.input-search input.form-control {
-webkit-border-radius: 500px;
border-radius: 500px;
}
.input-group-icon input.form-control,
.input-search input.form-control {
font-size: 12px;
font-size: 1.2rem;
padding-right: 36px;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
.input-group .form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
textarea {
-webkit-appearance: none;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.input-group-btn:first-child,
.input-search .input-group-btn:last-child {
border-radius: 500px;
}
.input-search .input-group-btn {
color: #ccc;
}
.input-group-icon .input-group-btn,
.input-search .input-group-btn {
border-radius: 500px;
width: 0;
}
.input-group-btn {
position: relative;
font-size: 0;
white-space: nowrap;
}
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
.btn-search-custom {
border: 0px solid transparent;
padding: 0;
}
.input-group-btn:last-child>.btn,
.input-group-btn:last-child>.btn-group {
z-index: 2;
margin-left: 13px;
}
#div-avatar-circle {
padding: 0;
}
.avatar-circle {
background-color: #5c6770;
border-color: #5c6770;
border-radius: 50%;
border-style: solid;
border-width: 1px;
height: 40px;
width: 40px;
display: inline-block;
vertical-align: top;
}
.show-user {
display: inline-block;
/* width: 98px; */
margin-top: 3px;
/* margin-left: 10px; */
/* margin: 0; */
/* padding: 0px; */
padding-left: 3px;
}
.nav-tabs-colors {
background-color: #ececef;
}
.edit-app-tabs {
background-color: #ececef;
}
#edit-app-tab {
background-color: #ececef;
}
#edit-app-content-title {
margin-left: 35px;
}
.app-name-title {
position: absolute;
top: 193px;
}
.app-name-title div h3 {
margin: 0;
padding: 0;
}
.privacy-statement-text-area {
position: absolute;
top: 241px;
}
#privacy-statement-data {
background-color: white;
resize: none;
overflow-y: auto;
/*width:460px;*/
height: 224px;
max-height: 224px;
}
.panel {
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
}
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
/* border-radius: 4px;*/
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
/* overflow-y: auto;*/
/*width:431px;*/
/*width:402px;*/
}
.panel-margin-settings {
margin-left: 20px;
margin-bottom: 15px;
}
#first-component {
margin-top: 33px;
}
.component-heading {
background: #2baab1;
height: 47px;
}
.component-heading-title {
margin-top: 11px;
margin-left: 15px;
margin-bottom: 0;
font-size: 22px;
color: white;
font-family: 'Lato', sans-serif;
display: inline-block;
}
.panel-heading {
background: #fdfdfd;
/* border-radius: 5px 5px 0 0;*/
/* border-bottom: 1px solid #DADADA;*/
/* padding: 18px;*/
position: relative;
}
/*
.panel-title {
color: #33353F;
font-size: 20px;
font-weight: 400;
line-height: 20px;
padding: 0;
text-transform: none;
}
*/
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 22px;
color: #2baab1;
font-family: 'Lato', sans-serif;
display: inline-block;
}
.panel-heading + .panel-body {
/* border-radius: 0 0 5px 5px;*/
}
.panel-body {
background: #fdfdfd;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
/* border-radius: 5px;*/
}
.panel-body {
padding: 15px;
}
.checkbox-custom {
position: relative;
padding: 0 0 0 25px;
margin-bottom: 7px;
margin-top: 0;
}
.checkbox-custom input[type="checkbox"] {
opacity: 0;
position: absolute;
top: 50%;
left: 3px;
margin: -6px 0 0 0;
z-index: 2;
cursor: pointer;
}
.checkbox-custom label {
cursor: pointer;
margin-bottom: 0;
text-align: left;
line-height: 1.2;
}
.checkbox-custom label:before {
content: '';
position: absolute;
top: 50%;
left: 0;
margin-top: -9px;
width: 19px;
height: 18px;
display: inline-block;
border-radius: 2px;
border: 1px solid #bbb;
background: #fff;
}
.checkbox-custom input[type="checkbox"]:checked + label:after {
position: absolute;
display: inline-block;
font-family: 'FontAwesome';
content: '\F00C';
top: 50%;
left: 4px;
margin-top: -5px;
font-size: 11px;
line-height: 1;
width: 16px;
height: 16px;
color: #2baab1;
}
.checkbox-inline {
position: relative;
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
/*
.checkbox-inline input[type="checkbox"] {
position: absolute;
margin-left: -20px;
}
*/
.new-category {
float: right;
margin-top: 5px;
text-decoration: none;
}
.new-category:link,
.new-category:visited,
.new-category:hover {
text-decoration: none;
cursor: pointer;
}
.dd {
position: relative;
display: block;
margin: 0;
padding: 0;
/* list-style: none;*/
font-size: 13px;
line-height: 20px;
}
.dd-list {
display: block;
position: relative;
margin: 0;
padding: 0;
list-style-type: decimal;
/* list-style: none;*/
}
.dd-item,
.dd-empty,
.dd-placeholder {
display: block;
position: relative;
margin: 0;
padding: 0;
min-height: 20px;
font-size: 13px;
line-height: 20px;
display: list-item;
}
.dd-item-reset {
font-size: 0;
}
.dd-handle {
display: block;
height: 34px;
margin: 5px 0;
padding: 6px 10px;
color: #333;
text-decoration: none;
font-weight: 600;
border: 1px solid #CCC;
background: white;
/* background: #F6F6F6;*/
-webkit-border-radius: 3px;
border-radius: 3px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.dd-list-ul {
list-style-type: none;
}
.dd-handle-assoc-file {
display: inline-block;
/*width:280px;*/
width: 277px;
height: 31px;
vertical-align: middle;
border-radius: 0;
font-size: 14px;
}
.btn-associated-file-item {
background-color: #dcdcdc;
border-bottom-left-radius: 5px;
border-color: #5c6770;
border-style: solid;
border-top-left-radius: 5px;
border-width: 1px;
height: 31px;
width: 93px;
display: inline-block;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
/* border-right:1px solid blc;*/
}
.close-assoc-file {
line-height: inherit;
}
#glossary-file-select,
#definition-file-select,
#design-file-select {
visibility: hidden;
z-index: -1000;
height: 0;
width: 0;
}
#modules-list-table-padding {
padding-left: 65px;
padding-right: 65px;
}
#modules-list-table-title {
margin-top: 33px;
margin-left: 15px;
display: block;
}
#create-module {
font-size: 12px;
color: #2baab1;
font-family: 'Lato', sans-serif;
font-weight: bold;
float: right;
text-decoration: none;
display: inherit;
margin-top: -5px;
margin-right: 10px;
}
#table-underline {
border: 1px solid #2baab1;
margin-top: 12px;
}
.modules-table > tbody > tr > th,
.modules-table > tbody > tr > td {
border-color: #ececef;
}
.modules-table tr > *:nth-child(1) {
padding-left: 15px;
}
.modules-table tr > *:nth-child(2) {
padding-left: 67px;
width: 336px;
max-width: 336px;
}
.modules-table tr > *:nth-child(3) {
padding-left: 103px;
padding-right: 30px;
}
.modules-table tr > *:nth-child(4) {
padding-right: 11px;
}
.modules-table > tbody > tr > td:last-child {
text-align: center;
}
/*.modules-table tr > th:last-child {
padding-right: initial;
float:right;
}*/
/*.modules-table tr > *:last-child {
padding-left: 10px;
}*/
/*.modules-table > tbody > tr > td:nth-child(2) {
width:336px;
}*/
/*div[class^="col-lg-1"]:first-child {
margin-left: 20px;
}*/
/*div[class^="col-lg-1"]:last-child {
margin-right: 20px;
}
div[class^="col-lg-3"]:first-child {
margin-left: 20px;
}
div[class^="col-lg-3"]:last-child {
margin-right: 20px;
}*/
.tools-option-link {
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #373d42;
vertical-align: middle;
margin-left: 5px;
}
.tools-option-container {
padding-top: 15px;
padding-bottom: 15px;
border-bottom: solid 1px black;
}
.reset-padding-top {
padding-top: 0;
}
#tools-block a:hover {
text-decoration: none;
}
#ChartistExtremeResponsiveConfiguration {}
.module-name {
display: inline-block;
width: 150px;
}
.circular-bar.circular-bar-xs {
width: 50px;
}
.circular-bar {
margin: 25px 0;
}
.circular-bar {
margin-bottom: 25px;
}
.mr-md {
margin-right: 15px !important;
}
.mt-xs {
margin-top: 5px !important;
}
.m-none {
margin: 0 !important;
}
.circular-bar-container {
position: relative;
top: 5px;
}
.circular-bar-percentage-text {
position: absolute;
top: 29%;
left: 21%;
}
table {
border-collapse: collapse;
}
td {
padding-top: 10px;
padding-bottom: 10px;
}
#module-of-the-day-id {
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #2baab1;
}
#module-of-the-day-name {
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #373d42;
}
.stars-styling {
font-size: 18px;
color: #ffbb00;
}
#module-of-the-day-review-paragraph {
/*width:343px;*/
font-size: 14px;
margin-top: 15px;
}
#item-reviewer {
float: right;
font-size: 14px;
/*font-family: 'Lato', sans-serif;*/
font-weight: bold;
color: #373d42;
}
#module-of-the-day-item-reviewer {
margin-bottom: 15px;
}
#module-usage-stats {
clear: both;
}
#module-usage-description {
position: relative;
margin-bottom: 15px;
border-bottom: solid 1px black;
}
#module-usage-text-container {
position: absolute;
top: 13%;
}
#module-usage-title {
font-size: 14px;
margin-bottom: 5px !important;
}
#module-usage-status {
font-size: 14px;
}
/* */
#published-items-description {
position: relative;
margin-bottom: 15px;
border-bottom: solid 1px black;
}
#published-items-text-container {
position: absolute;
top: 13%;
}
#published-items-title {
font-size: 14px;
margin-bottom: 5px !important;
}
#published-items-status {
font-size: 14px;
}
#published-items-percentage-text {
top: 33%;
left: 31%;
}
/* */
#device-description {
position: relative;
margin-bottom: 15px;
border-bottom: solid 1px black;
}
#device-text-container {
position: absolute;
top: 3%;
}
#device-title {
font-size: 14px;
margin-bottom: 5px !important;
}
#device-status {
font-size: 14px;
}
#view-all-statistics {
margin-top: 15px;
}
#view-all-statistics a:link {
text-decoration: underline;
}
.stats-paragraph-styling {
font-size: 14px;
font-weight: bold;
margin: 0;
}
.mb-none {
margin-bottom: 0 !important;
}
.text-weight-bold {
font-weight: 700;
}
h4,
.h4 {
font-size: 18px;
font-size: 1.8rem;
}
.text-xs {
font-size: 10px;
font-size: 1rem;
}
.text-muted {
color: #777;
}
/* */
.general-data-num-styling {
font-family: 'Lato', sans-serif;
font-size: 40px;
color: #2baab1;
}
.general-data-text-styling {
font-family: 'Lato', sans-serif;
font-size: 12px;
color: #373d42;
}
#items-num-inner-container {
/*margin-left: 15px;
margin-right: 15px;*/
border-left: solid 1px;
border-right: solid 1px;
}
/* */
.widget-summary {
display: table;
width: 100%;
}
.widget-summary .widget-summary-col.widget-summary-col-icon {
width: 1%;
}
.widget-summary .widget-summary-col {
display: table-cell;
vertical-align: top;
width: 100%;
}
.widget-summary .summary-icon {
margin-right: 15px;
font-size: 42px;
/*font-size: 4.2rem;*/
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
color: #fff;
-webkit-border-radius: 55px;
border-radius: 55px;
}
.bg-primary {
background: #0088cc;
}
.bg-secondary {
background: #E36159;
color: #FFF;
}
.bg-tertiary {
background: #2BAAB1;
color: #FFF;
}
.bg-quartenary {
background: #734BA9;
color: #FFF;
}
.widget-summary .summary {
min-height: 65px;
word-break: break-all;
}
.widget-summary .summary .title {
margin: 0;
font-size: 16px;
/*font-size: 1.6rem;*/
line-height: 22px;
/*line-height: 2.2rem;*/
color: #333;
font-weight: 500;
}
.widget-summary .summary .info {
font-size: 14px;
/*font-size: 1.4rem;*/
line-height: 30px;
/*line-height: 3rem;*/
}
.widget-summary .summary .amount {
margin-right: .2em;
font-size: 24px;
/*font-size: 2.4rem;*/
font-weight: 600;
color: #333;
vertical-align: middle;
}
.widget-summary .summary .info span {
vertical-align: middle;
}
.text-primary {
color: #0088cc !important;
}
.widget-summary .summary-footer {
padding: 5px 0 0;
border-top: 1px dotted #ddd;
text-align: right;
}
.text-uppercase {
text-transform: uppercase;
}
/*.panel-featured-tertiary {
border-color: #2BAAB1;
}
.panel-featured-quartenary {
border-color: #734BA9;
}*/
/*.panel-featured-left {
border-left: 3px solid #33353F;
}*/
.module-subscriptions {
display: block;
margin-top: 10px;
margin-left: 15px;
margin-right: 9px;
padding-bottom: 10px;
border-bottom: solid 3px;
}
.dropdown-menu.multi-column {
width: 1036px;
}
.dropdown-menu.multi-column .dropdown-menu {
display: block !important;
position: static !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
min-width: 100px;
}
JSFiddle link: https://jsfiddle.net/jaeedxpw/2/
Thanks in advance,
Eli Van Rock

Random movement from slideshow

I got a slideshow on my website but for some reason the slide make a movement that should not be the default one, it jumps from 1st slide for 3rd slide and then back to the 1st.
Then if you use the manual navigation (the circles) and go 1,2,3,4 he makes the correct movement but then he starts to make weird movements, just test by yourself a few times and you will see what i am talking about. My goal is to make 1st slide, to 2, to 3 then 4 and reset, simple.
Site live: http://optential.co.nf/
var seconds = 2; //time beetwen auto slide
var delay = 8; //time to restart auto slide
var slider = $('#slider');
var images = $('#slider .images');
var controls = $('<div>').addClass('controls');
slider.after(controls);
var width = images.width();
var slideClick = function () {
var b = $(this);
$('.controls div').removeClass('current');
b.addClass('current');
var index = b.index();
images.css('left', -1 * index * width);
};
$('#slider .images img').each(function (i) {
var img = $(this);
img.css('left', i * width);
var button = $('<div>');
controls.append(button);
if (i == 0) { button.addClass('current') }
button.click(function(){
clearInterval(autoSlideInterval);
slideClick.apply(this);
setTimeout(function () {
setInterval(autoSlide, seconds * 1000);
}, delay * 1000);
});
});
var autoSlide = function(){
var next = $('.controls .current').next();
if (next.length) {
slideClick.apply(next);
} else {
var first = $('.controls div').first();
slideClick.apply(first);
}
};
var autoSlideInterval = setInterval(autoSlide, seconds * 1000);
html,
body { height: 100%; }
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
background-size: cover;
color: white;
height: 100%;
min-height: 650px;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
box-shadow: 10px 6px 15px grey;
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 100px;
background-repeat: no-repeat;
text-align: right;
}
#btn {
width: 10em;
}
.mail2.fixed {
box-shadow: 10px 6px 15px grey;
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 100px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 30px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
#slider {
width: 100%;
height: 100%;
overflow: hidden;
}
#slider .images {
width: 100%;
position: relative;
transition: left 1s;
left: 0;
}
#slider .images img {
z-index: -1;
width: 100%;
background-size: 100%;
position: absolute;
}
.controls {
width: 350px;
margin: 5px auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 5px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: red;
}
.mobile {
min-width: 1300px;
}
.mobile .bar {
background-size: cover;
width: 100%;
background: #F4F4F4;
color: #595B61;
min-width: 700px;
display: flex;
justify-content: space-around;
text-align: center;
}
.mobile .bar img {
width: 100%;
background-size: cover;
display: block;
margin: 0 auto;
}
.mobile .content {
background: radial-gradient(ellipse at 55% 50%, #F9F9F9 40%,#B6B5BD 120%);
position: relative;
}
.mobile .content .mobimg {
padding: 3em;
margin-left:10%;
}
.mobile .content .mob {
position: absolute;
top: 0;
left: 60%;
}
.mobile .content h1 {
color: #D6D6D4;
font-size: 120px;
margin-bottom: 0;
}
.mobile .content p {
margin-left: 15px;
width: 410px;
color: #929584;
font-size: 12px;
margin-bottom: 18px
}
.mobile .content .sep {
height: 15px;
border-bottom: 1px solid #C24147;
text-align: center;
}
.mobile .content .sep img {
padding: 0 8px;
background: #F9F9F9;
}
.mobile .content h2 {
margin-left: 15px;
color: #929584;
font-size: 15px;
font-weight: 600;
text-align: center;
}
.mobile .content .buttons {
display: flex;
justify-content: space-around;
width: 400px;
margin-left: 20px;
}
.mobile .content .button {
display: block;
background: #010101;
color: #F8F8F8;
text-decoration: none;
width: 160px;
height: 50px;
border-radius: 6px;
position: relative;
}
.mobile .content .button:hover {
background: #222;
}
.mobile .content .button.apple img {
margin: 10px 0 0 10px;
}
.mobile .content .button.apple span {
font-size: 11px;
font-weight: 400;
position: absolute;
top: 4px; left: 42px;
}
.mobile .content .button.apple h3 {
font-size: 22px;
font-weight: 600;
position: absolute;
top: 14px; left: 42px;
margin: 0;
}
.mobile .content .button.google img {
margin: 18px 0 0 8px;
}
.mobile .content .button.google span {
font-size: 10px;
font-weight: 600;
position: absolute;
top: 4px; left: 40px;
text-transform: uppercase;
}
.mobile .content .button.google h3 {
font-size: 20px;
font-weight: 300;
position: absolute;
top: 16px; left: 38px;
margin: 0;
}
.mobile .content .button.google h3 b {
font-size: 22px;
font-weight: 400;
font-family: 'Cardo', serif;
margin: 0;
margin-right: 4px
}
.contact {
min-width: 1100px;
background-image: url("img/fundo2es.jpg");
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:750px;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 #btn {
display: inline-block;
color: white;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 4px;
padding: 10px 0px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/fixedbar.js"></script>
<script src="js/slider.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form action="form/form.php" method="post">
<h1>Try Now!</h1>
<input name="Email" class="Email" type="text" placeholder="Enter your Email address ...">
<input type="submit" value="Get started for free">
</form>
</div>
</div>
<div class="mail2">
<form action="form/form.php" method="post">
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
<input type="submit" id ="btn" value="Get started for free">
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<div class="controls">
<img src="img/3.png" alt="Image-1" />
<img src="img/2.png" alt="Image-2" />
<img src="img/1.png" alt="Image-3" />
<img src="img/4.png" alt="Image-4" />
</div>
</div>
</div>
<div class="mobile">
<div class="bar">
<img src="img/barra2.png">
</div>
<div class="content">
<img class="mobimg" src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/mob.png">
<div class="mob">
<h1>Mobile</h1>
<p>Optential combines the best of responsive software with native IOS and Android apps to provide the best experience and optimal results!</p>
<p>On laptops, desktops, tablets and phones, always get the best experience on the most intuitive project management set of tools in the world!</p>
<p class="sep">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/a1.png">
</p>
<h2>Get the app!</h2>
<div class="buttons">
<a class="button apple" href="">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/apple.png">
<span>Download on the</span>
<h3>App Store</h3>
</a>
<a class="button google" href="">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/google.png">
<span>Get it on</span>
<h3><b>Google</b>play</h3>
</a>
</div>
</div>
</div>
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form method="POST" id="contactos_form" action="form/contactengine.php" onsubmit="return submit_form(this);">
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="Name" size="50" placeholder="Name"/>
<input type="text" name="Email" size="50" placeholder="Email"/>
<input type="text" name="Subject" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="Message" rows="5" cols="70" placeholder="Message..."></textarea>
<input type="submit" id="btn"value="Send"/>
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
<script src="js/slider.js"></script>
<script>
function submit_form(form){
formulario=$("#contactos_form");
$.ajax({url: formulario.attr("action"), method:formulario.attr("method"), data:formulario.serialize(), success: function(result){
alert(result);
}});
return false;
}
</script>
</body>
</html>
Site live: http://optential.co.nf/
Slideshow: slider and controls on css.