Develop Reference

How to target and display error message with data-error in JavaScript

I'de like to validate a form with data propriety data-error and data-error-visible. I want to display the error message only with JS and don't use anymore HTML codes to do it.
The current code I use is below and I left only the first input :
/******
*
FORM VALIDATION
*
******/
// DOM
const formData = document.querySelectorAll(".formData");
const form = document.getElementById("form");
const firstName = document.getElementById("firstName");
const lastName = document.getElementById("lastName");
const email = document.getElementById("email");
const birthdate = document.getElementById("birthdate");
const quantity = document.getElementById("quantity");
const tournament = document.getElementsByName("location");
const checkbox = document.getElementsByName("checkbox");
// form preventDefault + checkInputs function
form.addEventListener('submit', e => {
e.preventDefault();
});
/***********
*
DATA-ATTRIBUTE
*
************/
// set error message to "true"
const displayErrorMsg = (element, message) => {
const formData = element
formData.setAttribute("data-error", message)
formData.setAttribute("data-error-visible", true)
}
// Function for remove one error msg
const removeErrorMsg = (element) => {
const formData = element
formData.removeAttribute('data-error')
formData.removeAttribute('data-error-visible')
}
/***********
*
* VALIDATION FUNCTION
*
************/
function validate(formData) {
let isFormValid = true;
// Regex
const nameRegex = /[a-zA-Z]+/i;
// First name
if (firstName.value.match(nameRegex) || firstName.value.length < 2) {
isFormValid = false;
displayErrorMsg(firstName);
} else {
removeErrorMsg(firstName);
}
}
:root {
--font-default: "DM Sans", Arial, Helvetica, sans-serif;
--font-slab: var(--font-default);
--modal-duration: 0.8s;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Landing Page */
body {
margin: 0;
display: flex;
flex-direction: column;
font-family: var(--font-default);
font-size: 18px;
max-width: 1300px;
margin: 0 auto;
}
p {
margin-bottom: 0;
padding: 0.5vw;
}
img {
padding-right: 1rem;
}
.topnav {
overflow: hidden;
margin: 3.5%;
}
.header-logo {
float: left;
}
.main-navbar {
float: right;
}
.topnav a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 12px 12px;
margin: 5px;
text-decoration: none;
font-size: 20px;
font-family: Roboto, sans-serif;
}
.topnav a:hover {
background-color: #ff0000;
color: #ffffff;
border-radius: 15px;
}
.topnav a.active {
background-color: #ff0000;
color: #ffffff;
border-radius: 15px;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 768px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 768px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
#media screen and (max-width: 540px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
margin-top: -15px;
}
}
main {
font-size: 130%;
font-weight: bolder;
color: black;
padding-top: 0.5vw;
padding-left: 2vw;
padding-right: 2vw;
margin: 1px 20px 15px;
border-radius: 2rem;
text-align: justify;
}
.modal-btn {
font-size: 145%;
background: #fe142f;
display: flex;
margin: auto;
padding: 2em;
color: #fff;
padding: 0.75rem 2.5rem;
border-radius: 1rem;
cursor: pointer;
}
.modal-btn:hover {
background: #3876ac;
}
.footer {
margin: 20px;
padding: 10px;
font-family: var(--font-slab);
}
/* Modal form */
.button {
background: #fe142f;
margin-top: 0.5em;
padding: 1em;
color: #fff;
border-radius: 15px;
cursor: pointer;
font-size: 16px;
}
.button:hover {
background: #3876ac;
}
.smFont {
font-size: 16px;
}
.bground {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(26, 39, 156, 0.4);
}
.content {
margin: 5% auto;
width: 100%;
max-width: 500px;
animation-name: modalopen;
animation-duration: var(--modal-duration);
background: #232323;
border-radius: 10px;
overflow: hidden;
position: relative;
color: #fff;
padding-top: 10px;
}
.modal-body {
padding: 15px 8%;
margin: 15px auto;
}
label {
font-family: var(--font-default);
font-size: 17px;
font-weight: normal;
display: inline-block;
margin-bottom: 11px;
}
input {
padding: 8px;
border: 0.8px solid #ccc;
outline: none;
}
.text-control {
margin: 0;
padding: 8px;
width: 100%;
border-radius: 8px;
font-size: 20px;
height: 48px;
}
.formData[data-error]::after {
content: attr(data-error);
font-size: 0.4em;
color: #e54858;
display: block;
margin-top: 7px;
margin-bottom: 7px;
text-align: right;
line-height: 0.3;
opacity: 0;
transition: 0.3s;
}
.formData[data-error-visible="true"]::after {
opacity: 1;
}
.formData[data-error-visible="true"] .text-control {
border: 2px solid #e54858;
}
/*
input[data-error]::after {
content: attr(data-error);
font-size: 0.4em;
color: red;
} */
.checkbox-label,
.checkbox2-label {
position: relative;
margin-left: 36px;
font-size: 12px;
font-weight: normal;
}
.checkbox-label .checkbox-icon,
.checkbox2-label .checkbox-icon {
display: block;
width: 20px;
height: 20px;
border: 2px solid #279e7a;
border-radius: 50%;
text-indent: 29px;
white-space: nowrap;
position: absolute;
left: -30px;
top: -1px;
transition: 0.3s;
}
.checkbox-label .checkbox-icon::after,
.checkbox2-label .checkbox-icon::after {
content: "";
width: 13px;
height: 13px;
background-color: #279e7a;
border-radius: 50%;
text-indent: 29px;
white-space: nowrap;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: 0.3s;
opacity: 0;
}
.checkbox-input {
display: none;
}
.checkbox-input:checked + .checkbox-label .checkbox-icon::after,
.checkbox-input:checked + .checkbox2-label .checkbox-icon::after {
opacity: 1;
}
.checkbox-input:checked + .checkbox2-label .checkbox-icon {
background: #279e7a;
}
.checkbox2-label .checkbox-icon {
border-radius: 4px;
border: 0;
background: #c4c4c4;
}
.checkbox2-label .checkbox-icon::after {
width: 7px;
height: 4px;
border-radius: 2px;
background: transparent;
border: 2px solid transparent;
border-bottom-color: #fff;
border-left-color: #fff;
transform: rotate(-55deg);
left: 21%;
top: 19%;
}
.close {
position: absolute;
right: 15px;
top: 15px;
width: 32px;
height: 32px;
opacity: 1;
cursor: pointer;
transform: scale(0.7);
}
.close:before,
.close:after {
position: absolute;
left: 15px;
content: " ";
height: 33px;
width: 3px;
background-color: #fff;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
.btn-submit,
.btn-signup {
background: #fe142f;
display: block;
margin: 0 auto;
border-radius: 7px;
font-size: 1rem;
padding: 12px 82px;
color: #fff;
cursor: pointer;
border: 0;
}
/* custom select styles */
.custom-select {
position: relative;
font-family: Arial;
font-size: 1.1rem;
font-weight: normal;
}
.custom-select select {
display: none;
}
.select-selected {
background-color: #fff;
}
/* Style the arrow inside the select element: */
.select-selected:after {
position: absolute;
content: "";
top: 10px;
right: 13px;
width: 11px;
height: 11px;
border: 3px solid transparent;
border-bottom-color: #f00;
border-left-color: #f00;
transform: rotate(-48deg);
border-radius: 5px 0 5px 0;
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
transform: rotate(135deg);
top: 13px;
}
.select-items div,
.select-selected {
color: #000;
padding: 11px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
border-radius: 8px;
height: 48px;
}
/* Style items (options): */
.select-items {
position: absolute;
background-color: #fff;
top: 89%;
left: 0;
right: 0;
z-index: 99;
}
/* Hide the items when the select box is closed: */
.select-hide {
display: none;
}
.select-items div:hover,
.same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
/* custom select end */
.text-label {
font-weight: normal;
font-size: 16px;
}
.hero-section {
min-height: 93vh;
border-radius: 10px;
display: grid;
grid-template-columns: repeat(12, 1fr);
overflow: hidden;
box-shadow: 0 2px 7px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
.hero-content {
padding: 51px 67px;
grid-column: span 4;
background: #232323;
color: #fff;
position: relative;
text-align: left;
min-width: 424px;
}
.hero-content::after {
content: "";
width: 100%;
height: 100%;
background: #232323;
position: absolute;
right: -80px;
top: 0;
}
.hero-content > * {
position: relative;
z-index: 1;
}
.hero-headline {
font-size: 6rem;
font-weight: normal;
white-space: nowrap;
}
.hero-text {
width: 146%;
font-weight: normal;
margin-top: 57px;
padding: 0;
}
.btn-signup {
outline: none;
text-transform: capitalize;
font-size: 1.3rem;
padding: 15px 23px;
margin: 0;
margin-top: 59px;
}
.hero-img {
grid-column: span 8;
}
.hero-img img {
width: 100%;
height: 100%;
display: block;
padding: 0;
}
.copyrights {
color: #fe142f;
padding: 0;
font-size: 1rem;
margin: 60px 0 30px;
font-weight: bolder;
}
.hero-section > .btn-signup {
display: none;
}
footer {
padding-left: 2vw;
padding-right: 2vw;
margin: 0 20px;
}
#media screen and (max-width: 800px) {
.hero-section {
display: block;
box-shadow: unset;
}
.hero-content {
background: #fff;
color: #000;
padding: 20px;
}
.hero-content::after {
content: unset;
}
.hero-content .btn-signup {
display: none;
}
.hero-headline {
font-size: 4.5rem;
white-space: normal;
}
.hero-text {
width: unset;
font-size: 1.5rem;
}
.hero-img img {
border-radius: 10px;
margin-top: 40px;
}
.hero-section > .btn-signup {
display: block;
margin: 32px auto 10px;
padding: 12px 35px;
}
.copyrights {
margin-top: 50px;
text-align: center;
}
}
#keyframes modalopen {
from {
opacity: 0;
transform: translateY(-150px);
}
to {
opacity: 1;
}
}
<form
id="form"
name="reserve"
action="index.html"
method="get"
>
<div class="formData">
<label for="firstName">Prénom</label><br>
<input
class="text-control"
type="text"
id="firstName"
name="first"
minlength="2"
required
/><br>
</div>
<input
class="btn-submit"
type="submit"
class="button"
value="C'est parti"
/>
</form>

I can't fix my bottom menu in any way on Chrome (while on FIrefox works perfectly)

I'm new to HTML/CSS3, so in order to strengthen the skills I've learned during an online course I'm trying to clone homepages of famous websites.
Now, I've almost completed the homepage of flickr.com but I've made a stupid mistake: I tested it only on Firefox (where it works smoothly on smartphone, tablet and desktop 1920*1080p view). Then I tried it on Chrome and...it was a disaster. My footer section was not working:
in tablet and desktop view, there's a gap between the footer and the bottom of the page I can't fix;
but although I can't fix the problem on my own, I managed to identify the problem: it's the little arrow near the word 'English' inside the footer (I need it cause when I click on it the language menu will pop up as in the original website). And I'm almost sure that this has to do with the 'position:absolute' propriety I assigned to that arrow in my style.css file (but I can't remove that property, otherwise it'll look ugly) ;
I tried working on padding and margin in any way I could think about, but I can't solve the problem and I can't tell if it's just bad styling or if the problem is connected to bad framing in my index.html file.
I don't know if someone is willing to give a look to my work. Any help will be really appreciated.
Thank you.
index.html:
<div class="header-container">
<header>
<a class="logo" href="#">
<img class="flickr" src="images/flickr-logo-2435.svg" alt="#">
<p>flickr</p>
</a>
<nav>
<div class="search-box">
<input class="search-txt" type="text" name="search" id="searchbar"
placeholder="Photos, people or groups">
<a class="search-icon" href="#">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
<div class="nav-button-A">
Log In
</div>
<div class="nav-button-B">
Sign Up
</div>
</nav>
</header>
</div>
<main>
<div class="wrapper">
<h1>Find your inspiration.</h1>
<h2>Join the Flickr community, home to tens of billions of photos and 2 million groups.</h2>
<div class="start-button">
Start for free
</div>
</div>
</main>
<footer>
<div class="footer-nav1">
<div class="footer-button">About</div>
<div class="footer-button">Jobs</div>
<div class="footer-button">Blog</div>
<div class="footer-button">Developers</div>
<div class="footer-button">Guidelines</div>
<div class="footer-button">Help</div>
<div class="footer-button">Help forum</div>
<div class="footer-button">English
<img class="arrow" src="/images/pngegg.png" alt="line down">
<div class="language-nav" style="display: none;">
<a class="language" href="#">Italiano</a>
<a class="language" href="#">French</a>
<a class="language" href="#">Espanol</a>
<a class="language" href="#">Deutsch</a>
<a class="language" href="#">日本語</a>
<a class="language" href="#">Portugues</a>
<a class="language" href="#">한국어</a>
</div>
</div>
</div>
<div class="footer-nav2">
<div class="footer-button">Privacy</div>
<div class="footer-button">Terms</div>
<div class="footer-button">Cookies</div>
<div class="footer-button">
<p>SmugMug+Flickr.</p>
<p>Connecting people through photography.</p>
</div>
<div class="social-nav">
<a class="social-button">
<i class="fa-brands fa-square-facebook"></i>
</a>
<a class="social-button">
<i class="fa-brands fa-twitter"></i>
</a>
<a class="social-button">
<i class="fa-brands fa-instagram"></i>
</a>
</div>
</div>
</footer>
</body>
</html>
style.css:
html {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
animation: animate 20s ease-in-out infinite;
background-size: cover;
background-position: center center;
margin: 0;
padding: 0;
}
#keyframes animate {
0%,
100% {
background-image: url(images/0.jpg);
}
25% {
background-image: url(images/1.jpg);
}
50% {
background-image: url(images/4.jpg);
}
75% {
background-image: url(images/3.jpg);
}
}
/* GLOBAL MOBILE */
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
.header-container {
position: fixed;
width: 100%;
}
header {
background-color: rgba(53, 57, 57, 0.376);
height: 65px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 20px 0 15px;
}
.logo {
display: flex;
text-decoration: none;
}
.flickr {
width: 25px;
height: 25px;
align-items: center;
padding-bottom: 5px;
box-sizing: border-box;
}
.logo p {
font-size: 1.6rem;
font-weight: 700;
margin-left: 5px;
color: white;
}
.search-box {
display: flex;
justify-content: flex-end;
align-items: center;
background: #2f364000;
height: 34px;
border-radius: 3px;
padding: 0px 0px;
}
.search-txt {
border-radius: 3px 0px 0px 3px;
border: none;
padding: 0;
background: #ffffffbd;
outline: none;
color: #4e5052;
font-size: 12px;
transition: 0.1s;
line-height: 34px;
width: 0px;
}
.search-icon {
color: #ffffff;
font-size: 1.2rem;
font-weight: 700;
width: 34px;
height: 34px;
border-radius: 0px 3px 3px 0px;
background: #2f364000;
display: flex;
justify-content: center;
align-items: center;
transition: 0.1s;
text-decoration: none;
}
.search-box:hover>.search-txt {
display: inline-block;
width: 130px;
padding: 0 0 0 3px;
}
.search-box:hover>.search-icon {
font-size: 1rem;
color: #4e5052;
background: #ffffffbd;
}
nav {
display: flex;
}
a {
color: white;
text-decoration: none;
}
.nav-button-A,
.nav-button-B {
font-size: 1rem;
font-weight: 500;
}
.nav-button-A {
border: 2px solid white;
margin-left: 10px;
padding: 7px 10px;
}
.nav-button-B {
/*show only in TABLET and DESKTOP mode*/
display: none;
margin-right: 15px;
border: 1.5px solid white;
background-color: white;
border-radius: 3px;
margin-left: 10px;
padding: 7px 10px;
}
.nav-button-B a {
color: #000000;
}
.nav-button-B a:hover {
color: #8b8c8d;
}
main {
height: 100vh;
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
display: block;
text-align: center;
color: white;
padding: 0 30px;
}
.wrapper h1 {
font-size: 3.5rem;
font-weight: 500;
margin-bottom: 18px;
box-sizing: border-box;
}
/*to reactivate in TABLET and DESKTOP mode*/
.wrapper h2 {
display: none;
font-size: 1.56rem;
font-weight: 500;
margin: 30px 40px 50px 40px;
line-height: 1.9rem;
box-sizing: border-box;
}
.wrapper a {
font-size: 1.45rem !important;
color: black;
font-weight: 700;
background-color: white;
padding: 17px 23px;
border-radius: 3px;
box-sizing: border-box;
}
.start-button {
margin-top: 40px;
}
.start-button a:hover {
color: #8b8c8d;
}
footer {
background-color: #000000;
color: white;
font-weight: 300;
width: 100%;
margin: 0 auto;
padding: 0 auto;
}
.footer-nav1 {
display: block;
padding: 0px 10px 0px 10px;
}
.footer-nav2 {
display: block;
padding: 0px 10px 15px 10px;
}
.footer-button {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.734);
text-align: left;
padding: 20px 20px;
font-weight: 300;
border-bottom: 1px solid rgba(255, 255, 255, 0.257);
}
.footer-button p {
padding: 3px 0px;
text-align: center;
}
.footer-button:hover {
color: white;
font-weight: 700;
}
.language-nav {
position: absolute;
margin-top: -240px;
margin-left: -5px;
margin-bottom: 100px;
}
.language {
display: block;
margin-left: 10px;
padding: 10px 20px;
color: #000000;
background-color: white;
}
.language:first-child {
border-radius: 4px 4px 0 0;
}
.language:last-child {
border-radius: 0 0 4px 4px;
}
.language:hover {
background-color: #e6eaec;
}
.arrow {
position: absolute;
width: 15px;
padding-left: 5px;
color: white;
display: inline-block;
}
.arrow:hover>.language-nav {
display: block;
}
.social-nav {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
.social-button {
color: #808080;
display: inline-block;
padding: 10px 20px;
box-sizing: border-box
}
.social-button:hover {
color: white;
font-weight: 700;
}
/* TABLET */
#media (min-width: 444px) {
.logo {
font-size: 2rem;
}
.search-box:hover>.search-txt {
width: 420px;
padding-left: 10px;
}
.nav-button-B {
display: inline-block;
padding: 7px 20px;
}
.nav-button-A {
border: none;
padding: 7px 15px 7px 5px;
}
main {
height: calc(100vh - 110px);
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
padding: 0 40px;
box-sizing: border-box;
}
.wrapper h2 {
display: block;
}
.start-button {
margin-top: 70px;
}
.wrapper a {
font-size: 1.35rem;
font-weight: 700;
background-color: white;
padding: 18px 30px;
border-radius: 3px;
}
.footer {
margin: 0 auto;
padding: 0 auto;
}
.footer-nav1 {
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.257);
}
.footer-nav2 {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0px 10px 0px 10px;
}
.footer-button {
font-size: 0.85rem;
border-bottom: none;
}
.footer-nav2>.footer-button {
border-bottom: none;
padding: 20px 15px;
}
.footer-button p {
display: inline;
}
.language-nav {
position: absolute;
display: inline;
margin-top: -265px;
margin-left: -45px;
margin-bottom: 100px;
}
}
/* DESKTOP 1920x1080p */
#media (min-width: 1080px) {
nav {
width: 95%;
}
.search-box {
justify-content: center;
width: 85%;
margin-right: auto;
margin-left: auto;
}
.search-txt {
border-radius: 3px 0px 0px 3px;
border: none;
padding-left: 15px;
background: #ffffffbd;
outline: none;
color: #4e5052;
font-size: 12px;
transition: 0.1s;
line-height: 34px;
width: 1400px;
}
.search-icon {
display: none;
}
.search-box:hover>.search-txt {
display: inline-block;
width: 1400px;
padding-left: 15px;
}
main {
/* background-color: beige; */
height: calc(100vh - 60px);
width: 100%;
margin: 0 auto;
}
.wrapper {
padding: 0 600px;
box-sizing: border-box;
}
.wrapper h2 {
line-height: 2.1rem;
}
footer {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 60px;
margin: 0 auto;
padding: 0 auto;
}
.footer-nav1 {
display: flex;
justify-content: space-between;
flex-grow: 2;
border-bottom: none;
}
.footer-nav2 {
display: flex;
justify-content: space-between;
flex-grow: 1;
align-items: center;
padding: 0 auto;
margin-left: 25px;
box-sizing: border-box;
}
.footer-nav2>.footer-button p:last-of-type {
display: none;
}
.footer-button {
padding: 5px 10px;
box-sizing: border-box;
}
.social-nav {
display: flex;
justify-content: space-between;
flex-grow: 1;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
.social-button {
font-size: 1.5rem;
color: #808080;
padding: 0 auto;
box-sizing: border-box;
}
.footer-nav2>.footer-button {
border-bottom: none;
padding: 20px 37px;
box-sizing: border-box;
}
.social-nav {
text-align: center;
max-width: 300px;
padding-top: 10px;
padding-bottom: 10px;
box-sizing: border-box;
}
.social-button {
color: #808080;
display: inline-block;
padding: 10px 20px;
box-sizing: border-box;
}
}
jquery-nav.js:
$(document).ready(function(){
$('.arrow').on('click', function(){
$('.language-nav').toggle();
})
});

You were exactly right! It was that English word causing problems... well not really the English word, it was the div surrounding it.
You have to close that div, from this:
<div class="footer-button">English
To this:
<div class="footer-button">English</div>

Collapsed navbar not closing on button click

I know there are similar questions posted but the solutions aren't working for me. Can anyone help me take a look?
I tried shifting the data-toggle and data-target into ahref too but it doesn't work. Not sure if it has anything to do with the css. Thanks for the help in advance!
.navbar a {
text-decoration: none;
color: black;
}
.navbar a.navbar-brand {
height: inherit;
line-height: inherit;
padding-top: 25px;
font-size: 32px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 2px;
}
.navbar a.navbar-brand span {
font-size: 38px;
font-weight: 700;
}
.navbar {
margin: 0 auto;
text-align: center;
}
.nav {
height: 52px;
width: 100%;
background-color: #4679b2;
position: relative;
z-index: 10;
}
.nav>.nav-header {
display: inline;
}
.nav>.nav-header>.nav-title {
display: inline-block;
font-size: 22px;
color: #fff;
padding: 7px 10px 10px 10px;
}
.nav>.nav-btn {
display: none;
}
.nav>.nav-links {
display: inline;
float: right;
font-size: 18px;
}
.nav>.nav-links>a {
display: inline-block;
padding: 14px 20px 12px 10px;
text-decoration: none;
color: #efefef;
}
.nav>.nav-links>a:hover {
background-color: rgba(0, 0, 0, 0.3);
}
.nav>#nav-check {
display: none;
}
#media (max-width:850px) {
.nav>.nav-btn {
display: inline-block;
position: absolute;
right: 0px;
top: 0px;
}
.nav>.nav-btn>label {
display: inline-block;
width: 50px;
height: 50px;
padding: 13px;
}
.nav>.nav-btn>label:hover {
background-color: rgba(0, 0, 0, 0.3);
}
.nav>.nav-btn>label>span {
display: block;
width: 25px;
height: 10px;
border-top: 2px solid #eee;
}
.nav>.nav-links {
position: absolute;
display: block;
width: 100%;
background-color: #333;
height: 0px;
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 50px;
}
.nav>.nav-links>a {
display: block;
width: 100%;
}
.nav>#nav-check:not(:checked)+.nav-links {
height: 0px;
}
.nav>#nav-check:checked+.nav-links {
height: calc(100vh - 50px);
overflow-y: auto;
}
}
<div class="nav-links" data-toggle="collapse" data-target=".nav-collapse.in">
Auditorium
Exhibition
Hotel
</div>

I'm not sure, but I think the data-target attribute should reference an id. You referenced .nav-collapse.in, which is a class.
Try to give your nav-bar an id.

Responsive search box issue, need help please

Currently, I use PrestaShop, and I wanted to change the width of search box, but, when I change the width of search box to 650px, on desktop it's ok, but on mobile the search box is very long — not responsive at all. Can you help with this issue please?
#search_block_top {
padding-top: 30px;
width: 650px;
}
#search_block_top #searchbox {
float: left;
width: 100%;
margin-top: -20px;
}
#search_block_top .btn.button-search {
background: #7ab55c;
display: block;
position: absolute;
top: 0;
right: 0;
border: none;
color: #fff;
width: 80px;
height: 40px;
text-align: center;
padding: 10px 0 11px 0;
}
#search_block_top .btn.button-search span {
display: none;
}
#search_block_top .btn.button-search:before {
content: "\f002";
display: block;
font-family: "FontAwesome";
font-size: 17px;
width: 100%;
text-align: center;
}
#search_block_top .btn.button-search:hover {
color: #6f6f6f;
}
#search_block_top #search_query_top {
display: inline;
padding: 13px 60px 13px 13px;
height: 40px;
background: #fbfbfb;
margin-right: 1px;
}
.ac_results {
background: #fff;
border: 1px solid #d6d4d4;
width: 271px;
margin-top: -1px;
}
.ac_results li {
padding: 0 10px;
font-weight: normal;
color: #686666;
font-size: 13px;
line-height: 22px;
}
.ac_results li.ac_odd {
background: #fff;
}
.ac_results li:hover,
.ac_results li.ac_over {
background: #fbfbfb;
}
form#searchbox {
position: relative;
}
form#searchbox label {
color: #333;
}
form#searchbox input#search_query_block {
margin-right: 10px;
max-width: 222px;
margin-bottom: 10px;
display: inline-block;
float: left;
}
form#searchbox .button.button-small {
float: left;
}
form#searchbox .button.button-small i {
margin-right: 0;
}
enter image description here

Try setting max-width
#search_block_top {
padding-top: 30px;
width: 100%;
max-width: 650px;
}

You can maybe use media queries and write something like that:
#search_block_top {
padding-top: 30px;
width: 650px;
#media screen and (max-width: 650px) {
width: 95%;
}
}

Margin on the right side of my form magically changing?

I'm trying to center my form but it's got a magic margin on the right. I've tried to make my form responsive but when I resize my window down, my submit button just doesn't want to center either, any tips?
http://jsfiddle.net/z85687ne/1/ - use SCSS on languages
a

You're generally lacking box-sizing property to be set to border-box, so your elements could include margins and paddings into overall calculations of their sizes.
Then you can set them up to width:100% as so:
CSS:
#import "elements.less";
#import "normalize.less";
#import "var.less";
#main {
p {
a {
}
}
}
body {
.font();
}
header img {
margin: 0 auto;
display: block;
margin-top: 3%;
border: 4px #blue solid;
}
section p {
.font(20px);
text-align: center;
}
section > p {
margin-bottom: 5px;
}
.contact-info {
border: 2px black solid;
margin: 20px auto 20px auto;
width: 80%;
}
#contact-area {
width: 600px;
margin-top: 25px;
margin: 0 auto;
border: 2px black solid;
padding: 15px;
input, textarea {
padding: 5px;
width: 471px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}
textarea {
height: 200px;
}
textarea:focus, input:focus {
border: 2px solid #900;
}
input.submit-button {
width: 100px;
float: right;
background-color: #0066FF;
text-transform: uppercase;
}
}
label {
float: left;
text-align: left;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
}
#main {
p {
}
}
.post-it{
margin-top: 50px;
}
.note {
color: #333;
position: relative;
width: 300px;
margin: 0 auto;
padding: 20px;
font-family: Satisfy;
font-size: 30px;
box-shadow: 0 10px 10px 2px rgba(0,0,0,0.3);
background: #eae672;
}
ul.share-buttons{
list-style: none;
padding: 0;
text-align: center;
}
ul.share-buttons li{
display: inline;
}
p {
color: black;
.tr(all 0.3s linear);
&.class1 {
}
&:hover {
color: lime;
.tr(all 0.3s linear);
}
}
#media screen and (max-width: 1000px) {
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
#contact-area {
width: 100%;
input, textarea {
width: 100%;
}
input.submit-button {
width: 100%;
margin: 0 auto;
float: left;
background-color: #0066FF;
text-transform: uppercase;
}
}
}
JSFiddle for that

It seems to me that you need some extra level of control over your elements. It could be done with a div within your form.
<form>
<div class="form-element">
<label for="Name">Name:</label>
<input type="text" name="Name" id="Name" />
</div>
</form>
Then you can control the form with
#contact-area {
width: 100%;
max-width: 600px;
.form-element {
width: 470px;
margin: 0 auto;
> label {
width: 125px;
display: inline-block;
}
> input,
> textarea {
display: inline-block;
}
}
}
And don't float your submit button right if you want it to be centered.