We Keep Coding

How do I make this nav bar logo responsive?

How do I make the nav bar logo resize properly and how do I fix the hamburger menu? I have tried to apply a media query to the nav bar logo and this does not seem to work...how to I make this nav bar logo responsive? It shrinks when I look at it on mobile. Also how do I fix the javascript void issue and fix the hamburger menu? Thanks in advance.
code:
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive_nav";
} else {
x.className = "topnav";
}
width: 20%;
height: 20%;
align-self: flex-start;
padding-top: 5px;
}
#media screen and (max-width: 900px) {
#home {
margin-top: 100px;
}
.topnav a {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive_nav {
position: relative;
}
.topnav.responsive_nav a.icon {
position: absolute;
right: 0;
top: 0;
left: 15px;
}
.topnav.responsive_nav a:not(:first-child) {
float: none;
display: block;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
color: white !important;
margin: 10px 0 0 0;
padding: 10px 0 !important;
background-color: #0F0F0F;
transition: 0.5s;
border: 3px solid #1F1F1F;
}
.topnav.responsive_nav a:hover {
background-color: rgba(27, 29, 32, 0.15);
}
.lang {
align-self: flex-start;
padding-top: 10px;
}
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.2vw;
/*updated*/
font-family: calibri;
position: fixed;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 0.3vw 2vw;
/*updated*/
background-color: #F4F7FF;
box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.05);
z-index: 10;
}
nav a {
text-decoration: none;
color: #010b0a
}
/*nav ul{ list-style-type: none; }*/
nav div a {
float: left;
padding: 5px 10px;
}
nav div a:hover {
background-color: #0ee4cc;
/*added*/
}
nav div a:hover {
color: #F4F7FF;
/*added*/
}
#media(max-width:900px) {
.toggle span {
display: block;
width: 25px;
height: 3px;
background-color: black;
margin: 6px 0;
}
.toggle:before {
font-family: calibri;
line-height: 0px;
margin-left: -30px;
}
/*nav ul{ position:absolute; width: 100%; height:auto; box-sizing:border-box; background-color:#0F0F0F; top: 50px; left: 0; transition: 0.5s; overflow: hidden; display: none !important; border:3px solid #1F1F1F; padding:0px; margin:0px; } */
/*nav ul li a{ border-bottom: 1px solid rgba(255,255,255,0.10) ; color:#ffffff !important; width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; margin: 0px !important; padding: 0px !important; }*/
.active-menu {
display: block !important;
}
/*nav ul li a:hover{ background-color:rgba(27,29,32,0.15); }*/
#media screen and (max-width: 900px) {
#home {
margin-top: 100px;
}
.topnav a {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive_nav {
position: relative;
}
.topnav.responsive_nav a.icon {
position: absolute;
right: 0;
top: 0;
left: 15px;
}
.topnav.responsive_nav a:not(:first-child) {
float: none;
display: block;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
color: white !important;
margin: 10px 0 0 0;
padding: 10px 0 !important;
background-color: #0F0F0F;
transition: 0.5s;
border: 3px solid #1F1F1F;
}
.topnav.responsive_nav a:hover {
background-color: rgba(27, 29, 32, 0.15);
}
.lang {
align-self: flex-start;
padding-top: 10px;
}
}
#media(max-width:900px) {
.toggle span {
display: block;
width: 25px;
height: 3px;
background-color: black;
margin: 6px 0;
}
.toggle:before {
font-family: calibri;
line-height: 0px;
margin-left: -30px;
}
/*nav ul{ position:absolute; width: 100%; height:auto; box-sizing:border-box; background-color:#0F0F0F; top: 50px; left: 0; transition: 0.5s; overflow: hidden; display: none !important; border:3px solid #1F1F1F; padding:0px; margin:0px; } */
/*nav ul li a{ border-bottom: 1px solid rgba(255,255,255,0.10) ; color:#ffffff !important; width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; margin: 0px !important; padding: 0px !important; }*/
.active-menu {
display: block !important;
}
/*nav ul li a:hover{ background-color:rgba(27,29,32,0.15); }*/
.p-container {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-gap: 10px;
height: auto;
}
.c-b-heading {
font-size: 1.4rem;
text-align: center;
}
#contact-form {
padding: 20px;
height: auto;
box-sizing: border-box;
}
#contact-form form {
flex-direction: column;
height: auto;
padding: 20px;
width: 90% !important;
}
.contact-left,
.contact-right {
width: 100%;
border: none;
}
.f-name,
.f-email {
width: 100%;
}
.f-name input,
.f-email input {
width: 100%;
border: none;
background-color: #262626 !important;
padding: 10px;
box-sizing: border-box;
height: 40px;
}
textarea {
background-color: #262626 !important;
margin: 10px 0px;
padding: 10px;
height: 200px !important;
width: 100% !important;
}
.message {
margin: 0px;
}
#contact-form form h1 {
margin: 5px 0px;
}
}
<nav>
<img src="logo.png" alt="Nature" class="responsive">
<div class="topnav" id="myTopnav">
<a href="javascript:void(0);" class="icon" onclick="toggleFunction()">
<div class="toggle"><span></span><span></span><span></span></div>
</a>
home
About
Services
ProjectsContact
<a href="javascript:void(0);" class="icon" onclick="toggleFunction()">
</div>
<!--language--><a class="lang">En</a>
</nav>

header changing style when uploaded to server

I have a website which is live. Its header should be like the below image:
When I am working on local its like that only, but when I am uploading to the server the header becomes small in every page except one page
every page it becomes small page except this page except
The CSS is below for header:
body {
font-family: Montserrat, sans-serif;
}
.navbar-inverse .navbar-toggle {
border-color: #fff;
border-radius: 0;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: transparent;
padding: 10px 22px 0 5px;
}
.navbar-inverse :hover {
background-color: transparent;
}
.navbar-header {
float: none;
}
.custom-navbar {
padding: 0;
}
.navbar {
border-radius: 0;
background-color: #01b7a8;
border-color: #01b7a8;
box-shadow: 0 0px 10px 3px rgba(0, 0, 0, .5);
}
.navbar-inverse .navbar-nav>li>a {
font-size: 19px;
color: #fff;
letter-spacing: 1px;
}
.navbar-inverse .navbar-nav>li>a:hover {
background-color: #01b7a8;
color: #0a2240;
}
.navbar-inverse .navbar-toggle:focus,
.navbar-inverse .navbar-toggle:hover {
background-color: transparent;
}
#media screen and (max-width: 768px) {
.custom-navbar {
display: inline-flex;
}
.custom-navbar li .btn {
margin-bottom: 2vh;
}
}
#media screen and (min-width: 768px) {
.navbar-right {
/*position: relative;
top: -7vh*/
}
.custom-navbar {
position: absolute;
top: 1vh;
z-index: 2222;
right: 3vh;
}
}
#media (max-width: 767px) .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #0a2240;
}
#media (max-width: 767px) .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #0a2240;
background-color: #fff;
/* padding: 0 15px 0 15px; */
}
.dropdown-menu>li>a {
color: #0a2240 !important;
background-color: #efeff0;
}
/* dropdown-menu */
#media (max-width: 767px) .navbar-nav .open .dropdown-menu>li>a {
line-height: 20px;
}
.container-fluid {
padding-right: 15px;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-nav>.open>a:hover {
color: #fff;
background-color: transparent;
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover {
color: #fff;
background-color: #d9f4f2;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-menu {
position: absolute;
top: 132%;
border-radius: 0;
padding: 0 0;
border: 0px;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #333! important;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-menu>li>a {
display: block;
padding: 10px 20px;
color: #0a2240 !important;
background-color: #efeff0;
}
.dropdown-menu>li>a:hover {
background-color: #d9f4f2;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
/*dropdown-menu end */
/*top button */
.btn:hover {
background-color: #2B3856 !important;
color: #f8dd4d !important;
border-color: #2B3856 !important;
}
.btn:active {
background-color: #2B3856 !important;
color: #f8dd4d !important;
border-color: #2B3856 !important;
}
/*links styling*/
#myNavbara>li>a: hover {
background-color: #01b7a8 !important;
color: #0a2240 !important;
}
can anyone tell me how to fix this?

I think, there is must be a live CDN link and which does not work on local may be because internet issue and when you upload on server then It works with internet.
You can check your all the files for this. May be this will work for you.
Thank you.

I'm noticing that you have inline styles applied to your header buttons, which are different for this page and this page. Also, I noticed that some of your font sizes are in vh. Try using something like em or rem instead.
I don't know how you're building this website, but if possible, drop the inline styles and style the buttons with their class instead.

Search box looks different on mobile, cannot get it to be in the center of the page nor reduce the size of the search box

My site looks different on mobile, the hotel search box does not show up in it's entirety, so the labels at the bottom get cut off. Also I tried to add the following CSS code, it helped to center the hotel search box but I cannot get it to move the box closer to the header and make it smaller so that when I click on options they are not cut off:
#media only screen and (max-width:767px){
.containerBox {
width: 100%!important;
}
}
Here is the link and screenshot of what I am talking about.
Hotel Search box on the home page.
I will include the full code below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#selectCountry:ACTIVE, #destino:ACTIVE, #selectCountry:FOCUS, #destino:FOCUS {
color: #FFFFFF;
background-color: #ed8323; }
.select-complementarias {
border: 0px solid #dadada !important;
border-radius: 3px !important;
padding: 5px !important;
font-weight: bold !important;
color: #424547 !important;
width: 100%; }
.select-complementarias:ACTIVE, .select-complementarias:FOCUS {
color: #FFFFFF;
background-color: #ed8323; }
.searchCity {
min-width: 200px;
width: 100%;
color: #424547; }
.warning {
color: #FF0000 !important;
font-size: 14px; }
.numInputHidden, .elementHidden {
display: none; }
.divNewLine {
clear: left;
padding: 3px; }
.divCell {
float: left;
margin-right: 2px;
max-width: 236px;
width: 100%;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.cell-complementarias {
float: left;
margin-right: 2px;
width: 250px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px; }
.divCell-auto {
float: left;
margin-right: 2px;
width: 100%;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.divCellSmall {
float: left;
margin-right: 2px;
width: 110px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.divCell-20px {
float: left;
margin-right: 2px;
width: 20px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.divCell-50px {
float: left;
margin-right: 2px;
width: 50px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 3px; }
.divCell-130px {
float: left;
margin-right: 2px;
width: 130px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.divCell-100px {
float: left;
margin-right: 2px;
width: 100px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.time-hours {
width: 100px !important; }
.time-minutes {
width: 100px !important; }
.hoursFligths {
display: inline;
margin-left: 11px;
width: 130px !important; }
#selectsMenores select {
width: 50px; }
.textHidden {
display: none; }
.ui-datepicker {
font-size: 11px; }
.ui-widget {
font-size: 12px; }
.containerBox input {
border: 0px solid #dadada;
border-radius: 3px;
padding: 5px;
/*font-weight: bold;*/
line-height:21px!important;
width: 95%!important;
}
.containerBox select {
border: 0px solid #dadada !important;
border-radius: 3px !important;
padding: 5px !important;
/*font-weight: bold !important;*/
color: #424547 !important;
width: 100%;
-moz-appearance: none;
cursor: pointer;
height:auto;
}
#selectCountry {
width: 95% !important; }
.input-date {
width: 100%;
color: #424547; }
.input-date-home {
width: 357px !important;
color: #424547; }
.input-date:ACTIVE, .input-date-home:FOCUS, .input-date-home:ACTIVE, .input-date-home:FOCUS {
color: #FFFFFF;
background-color: #ed8323; }
.ui-widget {
font-weight: bold !important; }
.ui-widget-content {
font-weight: bold !important;
border: 0px solid #eee; }
.container-box-ticket, .container-box-hotel {
width: 375px !important; }
.container-box-ticket {
width: 375px !important; }
.containerBox {
font-family: arial;
border: 0px solid #dadada;
width: 512px!important;
background-color: #262626e8;
color: #FFFFFF;
font-size: 17px;
/*font-weight: bold;*/
padding: 10px;
position: relative; }
.containerBox label {
font-size: 12px;
font-weight: bold;
color: #fff;
display: inline-block;
}
.containerBox input:FOCUS {
border: 0px solid #dadada;
border-color: #53a69d;
box-shadow: 0 0 3px #000000;
background-color: #ed8323;
color: #FFFFFF; }
select:FOCUS, .containerBox input:ACTIVE, select:ACTIVE {
border: 0px solid #dadada !important;
border-color: #ed8323 !important;
box-shadow: 0 0 3px #000000 !important;
background-color: #ed8323 !important;
color: #FFFFFF !important; }
.containerBox button {
border: 0px solid #D8D8D8;
border-radius: 3px;
background-color: #F2F2F2;
font: arial;
font-size: 12px;
cursor: pointer;
width: 100px;
height: 35px!important; }
.containerBox button:HOVER {
border-radius: 3px;
border-color: #CED8F6;
background-color: #D8D8D8; }
#divbuttonverpreciosbuscando {
display: none; }
.spinner {
margin: 10px auto;
width: 50px;
height: 40px!important;
text-align: center;
font-size: 10px; }
.spinner > div {
background-color: #333;
height: 100%!important;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out; }
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s; }
.spinner .rect3 {
-webkit-animation-delay: -1s;
animation-delay: -1s; }
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s; }
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }
#-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4); }
20% {
-webkit-transform: scaleY(1); } }
#keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4); }
20% {
transform: scaleY(1);
-webkit-transform: scaleY(1); } }
hr {
color: #ed8323;
border-color: #ed8323; }
.titulo {
font-size: 20px;
text-align: left;
margin-left: -15px;
margin-right: -15px; }
.titulo-segundo {
font-size: 12px;
margin-left: -8px;
margin-right: 38px;
margin-top: -28px;
position: fixed;
text-align: left;
width: 225px;
z-index: 110; }
#ver_precios, .buttonForm {
background-color: #ed8323 !important;
color: #FFFFFF !important;
font-weight: bold !important;
opacity: 1 !important;
border: 0 solid #d8d8d8;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
width: 100px;
height: 35px;!important; }
.ui-datepicker {
background: #ffffff;
border: 1px solid #555;
color: #EEE;
border: 0px;
box-shadow: 0 0 3px #000000; }
.ui-datepicker-header {
position: relative;
padding-bottom: 10px;
background: #ffffff !important;
border: 0px !important; }
.ui-widget-header {
background: #ffffff !important; }
.ui-dialog .ui-dialog-titlebar {
color: #FFFFFF;
font-size: 16px;
font-weight: bold !important;
background: #262626; }
.ui-dialog .ui-dialog-titlebar .ui-button {
color: #FFFFFF !important;
font-size: 16px !important;
font-weight: bold !important;
background: #262626 !important; }
.ui-dialog .ui-dialog-titlebar .ui-state-focus {
background: red; }
.ui-dialog {
background: #262626;
position: fixed; }
.ui-datepicker-title {
background-color: #ffffff;
line-height: 1em !important; }
.ui-datepicker-month {
color: #ed8323;
padding: 0px !important;
margin: 0px !important;
background-color: #ffffff; }
.ui-datepicker-year {
color: #ed8323;
background-color: #ffffff; }
.ui-datepicker .ui-state-default {
background: #ffffff !important;
border: 0px solid #d3d3d3 !important; }
.ui-datepicker, .ui-datepicker .ui-datepicker-calendar .ui-state-default {
color: #000000 !important;
text-align: center; }
.ui-state-active {
border-radius: 0 !important;
background: #ed8323 !important;
cursor: pointer !important;
text-decoration: none !important; }
.ui-state-focus {
border-radius: 0 !important;
cursor: pointer !important;
text-decoration: none !important;
border: 0px; }
.ui-state-focus:HOVER {
border-color: transparent;
color: #FFFFFF !important;
background: #1ec7e6 !important; }
.ui-menu, .ui-menu-item {
background: #ed8323 none repeat scroll 0 0 !important; }
.ui-datepicker-calendar td a.ui-state-hover {
background: #ed8323 none repeat scroll 0 0 !important; }
.ui-datepicker-calendar td a.ui-state-active {
background: #ed8323 none repeat scroll 0 0 !important; }
.ui-datepicker-calendar td a.ui-state-focus {
background: #ed8323 none repeat scroll 0 0 !important; }
.ui-datepicker-title {
margin: 0 2.3em;
text-align: center; }
.ui-datepicker-year {
display: block;
font-size: 9px;
margin-left: -5px; }
.ui-datepicker table {
border-collapse: separate;
font-size: 0.9em; }
.calendarioIcon {
height: 19px!important;
margin: 6px 149px;
position: absolute; }
.close-dialog-icon {
cursor: pointer;
height: 51px;
margin: -22px 525px 0;
position: absolute; }
.calendarioIcon-hotel {
height: 19px!important;
margin: 3px 20px;
position: absolute;
right: 5%; }
.calendarioIcon-tickets {
height: 19px!important;
margin: 6px 438px;
position: absolute; }
.calendario-icon-homes {
height: 19px!important;
margin: 3px 440px;
position: absolute; }
.calendario-icon-arrow {
height: 25px!important;
margin: 3px 175px;
position: absolute; }
.ui-autocomplete-loading {
background: white url("material/ring-alt.svg") right center no-repeat;
background-size: 20px 20px; }
.spinner {
margin: 10px auto;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px; }
.spinner > div {
background-color: #333;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out; }
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s; }
.spinner .rect3 {
-webkit-animation-delay: -1s;
animation-delay: -1s; }
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s; }
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }
#-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4); }
20% {
-webkit-transform: scaleY(1); } }
#keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4); }
20% {
transform: scaleY(1);
-webkit-transform: scaleY(1); } }
#divbuttonverpreciosbuscando {
display: none; }
.ui-corner-all {
border: 0px; }
#airline {
width: 100%!important; }
.label-hiden {
display: none !important; }
.containerBox-header {
opacity: 0.9 !important;
/* border-top-left-radius: 10px;
border-top-right-radius: 10px;*/ }
.containerBox-footer {
opacity: 1 !important;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
/* padding-top: 9px !important;
padding-bottom: 20px !important;*/
transition-duration: 0.4s;
transition-property: background;
/* height: 5px !important;*/
background-color: #ed8323 !important;
font-size: 14px;
font-weight: 500 !important; }
.containerBox-footer:HOVER {
background-color: #ed8323 !important;
cursor: pointer; }
.buscar-label {
margin-top: 5px !important; }
.ui-dialog .ui-dialog-titlebar, .ui-dialog label {
background: #262626 none repeat scroll 0 0 !important;
color: #FFFFFF; }
.error-input {
border-color: #FF0000;
box-shadow: 0 0 1em red;
background-color: #FBEFF2; }
.error-input:-ms-input-placeholder {
color: red !important; }
.error-input::-moz-placeholder {
color: red !important; }
.error-input:-moz-placeholder {
color: red !important; }
.error-input::-webkit-input-placeholder {
color: red !important; }
.containerBox input::-webkit-input-placeholder {
color: #000000; }
.containerBox input:-ms-input-placeholder {
color: #000000; }
.containerBox input::-moz-placeholder {
color: #000000; }
.containerBox input:focus::-webkit-input-placeholder {
color: #000000 !important; }
.containerBox input:focus:-ms-input-placeholder {
color: #000000 !important; }
.containerBox input:focus::-moz-placeholder {
color: #000000 !important; }
#not-found-sources {
color: #FFFFFF; }
.ui-autocomplete-input .ui-corner-all {
color: #000000 !important; }
.ui-autocomplete a {
color: #000000 !important; }
.box_float{
display: block;
position: absolute;
top: 90px;
z-index: 2;
}
li{
list-style-type: none!important;
margin: 0;
padding: 0;
}
.caja_fondo{
height:auto;
font-family: arial;
border: 0px solid #dadada;
opacity: 0.8;
color: #FFFFFF;
font-size: 17px;
/*font-weight: bold;*/
padding: 15px;
position: relative;
}
.catalog-area {
display: inline-block;
background-color: rgba(39,46,59,.8);
height: auto;
padding: 1px 1px 1px 1px;
width: 100%;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
/*.imagenes_circuitos {
height: 456px;
width: 370px;
padding: 1px 1px 1px 1px;
overflow-y: scroll;
}
.imagenes_circuitos_min{
padding-top: 20px;*/
}
.circuit_catalog {
display: table-cell;
z-index: 9;
padding: 1px 1px 1px 1px;
font-family: Arial, Helvetica, sans-serif;
/*font-weight: bold;*/
display: inline-block;
text-align: center;
color: gray;
display: inline-block;
border-radius: 25px;
vertical-align: middle;
border-radius: 25px;
}
.circuit_catalog a {
color: #3c5c8b;
font-weight: 700;
text-decoration: none;
outline: none;
font-family: Arial, Helvetica, sans-serif;
line-height: 12px;
/*font-weight: bold;*/
display: inline-block;
text-align: center;
color: gray;
display: inline-block;
}
/*.img_circuits {
opacity: .8;
width: 160px;
height: 200px;
border-radius: 15px;
box-shadow: 2px 2px 2px #3C5C8B;*/
}
.containerBoxCircuits {
font-family: arial;
border: 0px solid #dadada;
background-color: #262626;
color: #ffffff;
font-size: 17px;
/*font-weight: bold;*/
padding-left: 15px;
padding-right: 15px;
display: inline-block;
float: left;
opacity: .8;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.container-box-circuit{
margin-left:20px;
display:none;
}
/*.img_circuits_min {
width: 80px;
height: 100px;
border-radius: 15px;
box-shadow: 2px 2px 2px #3C5C8B;*/
}
.circuit_catalog_min {
font-family: Arial, Helvetica, sans-serif;
line-height: 12px;
/*font-weight: bold;*/
width: 88px;
height: 110px;
display: inline-block;
text-align: center;
color: gray;
display: inline-block;
border-radius: 25px;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
}
.celdas {
float: left;
padding: 5px;
}
.containerBox-circuits {
padding-bottom: 20px;
}
/*.img_circuits_botmin {
background-color: #d42729;
position: absolute;
float: left;
left: 4px;
bottom: 10px;
width: 80px;
height: 23px;
line-height: 10px;
font-size: 7px;
color: white;
font-weight: inherit;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;*/
}
.textcatmin {
position: absolute;
float: left;
padding-top: 0px;
left: 0px;
width: 80px;
height: 22px;
line-height: 7px;
font-size: 7px;
color: white;
font-weight: inherit;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
overflow: hidden;
}
.containerBoxAll {
width: 512px!important;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.tab-content .tab-menu button {
color: #fff;
cursor: pointer;
opacity: 1 !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
transition-duration: 0.4s;
transition-property: background;
height: 5px !important;
background-color: #ed8323 !important;
width: 81px;
padding: 10px;
}
.tab-content .tab-menu button:HOVER {
background-color: #ed8323 !important;
cursor: pointer;
color:#000;
}
.tab-content .tab-menu button.active {
background-color: #262626!important;
color: #ed8323 ;
}
span.titulo-tabs {
word-wrap:normal;
float:left;
line-height: 0px;
}
.footerAll {
width: 512px!important;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.form-service{
margin-left: 13px;
margin-right: -13px;
}
.CircuitsAll {
width: 511px!important;
opacity: 1!important;
}
.CircuitsAll:HOVER {
opacity: 1!important;
}
.containerBoxCircuitsAll:HOVER {
opacity: 1!important;
}
.containerBoxCircuitsAll{
width: 541px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.tab-content{
width:100%;
float:left;
}
input[type="radio"], input[type="checkbox"] {
margin-right: 0.5em;
width: 15px!important;
}
/*# sourceMappingURL=comun.css.map */

Use these css
#media(max-width:767px){
.html_header_transparency #top .avia-builder-el-0 .container, .html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
padding-top: 0px;
}
#top .input-text, #top input[type="text"], #top input[type="input"], #top input[type="password"], #top input[type="email"], #top input[type="number"], #top input[type="url"], #top input[type="tel"], #top input[type="search"], #top textarea, #top select {
margin-bottom: 10px;
height: 39px;
}
.avia-slideshow li img {
display: none;
}
}
for center the box use it.
.containerBox {
margin: auto;
}
.containerBox-header {
opacity: 0.9 !important;
margin-top: 70px;
}
.avia_codeblock_section .avia_codeblock .widget {
top: 0;
left: 0;
}
for mobile view
#media (max-width: 767px)
#wrap_all #main #after_full_slider_1 .container .av-content-full .post-entry .entry-content-wrapper .avia_codeblock_section .avia_codeblock .widget {
width: 100% !important;
}
.avia_codeblock_section .avia_codeblock .widget {
left: 0;
top: 0;
}
}
if it's not work use !important after css like this - display: none !important;

Why won't these boxes appear in alignment?

I want all the boxes to be made with perfect alignemnt, but for some reason, from the second row onwards, they start to lean to the left.
$(document).ready(function() {
number = 0;
document.getElementById("create").onclick = function () {
var ok = true;
boxHTML = document.getElementsByClassName("box")[number].innerHTML;
if (ok === true) {
var obj = document.createElement('div');
obj.className = 'box';
obj.innerHTML = boxHTML;
$(this).before(obj);
}
number++;
};});
//Colours
$Background:#EAEAEA;
//Body
body{
}
//Menu
#menu {
margin-left: 5%;
margin-top: 5.25rem;
position:absolute;
ul{
list-style-type: none;
}
li{
a{
padding: 10px 15px;
text-decoration: none;
display: block;
color: black;
font-family: "roboto", sans-serif;
&:hover {
text-transform: uppercase;
}
}
}
}
//Dashboard
#dashboard{
display: inline-block;
border-radius:5px;
border: 0.5px solid black;
width: 73%;
height: 35rem;
margin-left: 17%;
margin-right: 20%;
margin-top: 6.8rem;
position: absolute;
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 10px rgba(0,0,0,0.8);
box-shadow:0 0 10px rgba(0,0,0,0.8);
}
//Boxes
#import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
html, * {
box-sizing: border-box;
}
body {
background: #e4e9f0;
padding: 40px;
}
.box {
float: left;
position: relative;
display: inline-block;
width: 45%;
background: white;
padding: 30px;
margin-right: 2%;
margin-left: 4%;
margin-top: 3%;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: 2px;
overflow: hidden;
+ .box {
margin: 0px;
margin-top: 3%;
}
&:after {
padding-top: 30%;
display: block;
content: '';
}
> div {
float: left;
width: 100%;
height: 150px;
color: #fff;
}
header {
background: #533687;
display: block;
margin: -30px -30px 30px -30px;
padding: 10px 10px;
h2 {
line-height: 1;
padding: 0;
margin: 0;
font-family: "roboto", sans-serif;
font-weight: 600;
font-size: 20px;
color: white;
-webkit-font-smoothing: antialiased;
}
}
}
#create {
user-select:none;
padding:20px;
border-radius:20px;
text-align:center;
border:15px solid rgba(0,0,0,0.1);
cursor:pointer;
color:rgba(0,0,0,0.1);
font:220px "Helvetica", sans-serif;
line-height:185px;
float:left;
padding:25px 25px 40px;
margin:0 20px 20px 0;
width:250px;
height:250px;
margin-top: 3%;
}
#create:hover { border-color:rgba(0,0,0,0.2); color:rgba(0,0,0,0.2); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dashboard">
<a href="#" class="box">
<header><h2>Responsive C3</h2></header>
<div id="chartA">
</div>
</a>
<div id="create">+</div>
</div>
JSFiddle

It didn't work for you because the newly added boxes have different margin properties. I've just statically set margin properties for the first box.
https://jsfiddle.net/oh0hjavL/2/

Clicking on page refreshes ; reappears two input elements?

I'm usig plugin for drop-down (sub-menu) in my HTML. My HTML looks like following:-
HTML
<div class="taxonomy" id="taxonomy_id" style="height: 54px">
<input type="text" class="category" name="category" id="category" value="" />
<input type="text" class="category" name="category_1" id="category_1" value="" /></div>
</body>
JS
$(document).ready(function (){
$("#category").mcDropdown("#categorymenu",{targetColumnSize: 1});
$("#category_1").mcDropdown("#categorymenu_1",{targetColumnSize: 1});
DEMO
Now, when I hit refresh once the page is loaded, I see the rest of html elements remain static on page, the dropdown items appears / refreshes instead. With each refresh they are loaded again the focus is changed it seems, can I change this behaviour.
UPDATE PLUGIN CSS
/*
styles for the psuedo-select box
*/
div.mcdropdown {
position: absolute;
border: 1px solid #8e9daa;
padding: 1px;
display: -moz-inline-block;
display: inline-block;
width: 408px;
height: 14px;
padding: 2px;
}
/* style either the input or div where the plug-in is attached to */
div.mcdropdown input,
div.mcdropdown div {
position: absolute;
background-color: #fff;
left: 0;
top: 0;
width: 98%;
border: 0;
padding: 2px 0 0 3px;
font: 11px Arial, Helvetica, sans-serif;
}
div.mcdropdown a {
position: absolute;
right: 1px;
top: 1px;
background: transparent url(../images/mcdropdown/mcdd_select_button_sprite.gif) no-repeat top left;
display: -moz-inline-block;
display: inline-block;
height: 16px;
width: 15px;
text-decoration: none;
font-size: 0pt;
z-index: 2;
outline: 0;
}
div.mcdropdown a:hover, div.mcdropdown a:focus {
background-position: 0% -16px;
}
div.mcdropdown a:active {
background-position: 0% -32px;
outline: none; /* hide dotted outline in Firefox */
}
div.mcdropdownDisabled {
background-color: #e1e0e0;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: none;
-moz-user-focus: ignore;
-moz-user-input: disabled;
}
div.mcdropdownDisabled input {
cursor: default;
}
div.mcdropdownDisabled a:hover, div.mcdropdownDisabled a:focus {
background-position: 0 0;
cursor: default;
}
/*
styles for the dropdown menu
*/
ul.mcdropdown_menu {
display: none;
margin: 0px;
padding: 0px;
list-style-type: none;
/* float so we can calculate the size of the columns */
float: left;
clear: both;
z-index: 10000;
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: none;
-moz-user-focus: ignore;
-moz-user-input: disabled;
}
ul.mcdropdown_menu ul {
display: none;
font: 11px Arial, Helvetica, sans-serif;
/* float so we can calculate the size of the columns */
/*
float: left;
*/
}
/* -- Sub-Menus -- */
ul.mcdropdown_menu ul {
position: absolute;
list-style-type: none;
margin: 0px;
margin-left: 30px;
padding: 0px;
z-index: 10000;
}
ul.mcdropdown_menu ul li {
margin: 0px;
min-width: 150px;
_width: 150px; /* ie6 min-width hack */
}
/* color schema */
ul.mcdropdown_menu {
/*
height: 19px;
*/
height: auto;
background-color: #e1e0e0;
padding: 5px 5px;
/* define font here for IE6 */
font: 11px Arial, Helvetica, sans-serif;
}
ul.mcdropdown_menu li {
padding: 2px 20px 2px 6px;
/* this is needed to ensure that all browsers have the same line-height--fixes issues in Chrome (Mac) and IE10 */
line-height: 14px;
}
/* we don't use "ul.mcdropdown_menu > li" here so that IE6 knows how to style the root level */
ul.mcdropdown_menu li.mc_root {
cursor: pointer;
white-space: nowrap;
color: #666;
border-top: 1px solid #fff;
padding: 2px 20px 2px 6px;
margin: 0 10px;
}
ul.mcdropdown_menu > li.mc_endcol {
border-bottom: 1px solid #fff;
}
/* this is for IE6 only */
ul.mcdropdown_menu li.mc_hover {
background-color: #ccc !important;
}
ul.mcdropdown_menu > li:hover {
border-top: 1px solid #999;
background-color: #999 !important;
color: #fff;
}
ul.mcdropdown_menu > li:hover.mc_endcol {
border-bottom: 1px solid #999;
}
ul.mcdropdown_menu > li:hover + li:not(.mc_firstrow) {
border-top: 1px solid #999;
}
ul.mcdropdown_menu li.mc_parent {
padding-right: 20px !important;
background: url(../images/mcdropdown/mcdd_icon_normal.gif) no-repeat 100% 50%;
}
ul.mcdropdown_menu li:hover.mc_parent {
background: #999 url(../images/mcdropdown/mcdd_icon_hover.gif) no-repeat 100% 50% !important;
color: #fff !important;
}
ul.mcdropdown_menu ul {
background: #f0f0f0;
/* add a slight border for better visualization of deep menus */
border: 1px solid #d0d0d0;
padding-bottom: 10px;
/* IE 6/7 will bleed through the background color if we don't set the visibility to hidden */
visibility: hidden;
}
ul.mcdropdown_menu ul li {
background: #f0f0f0;
padding-left: 16px !important;
border-top: 1px solid #fff;
color: #666;
white-space: nowrap;
}
ul.mcdropdown_menu ul li.mc_firstrow {
border-top: 1px solid #f0f0f0;
}
ul.mcdropdown_menu ul li.mc_endcol {
border-bottom: 1px solid #fff;
}
ul.mcdropdown_menu ul li:hover {
background-color: #d6d6d6;
border-top: 1px solid #dedede;
color: #666;
}
ul.mcdropdown_menu ul li.mc_endcol:hover {
border-bottom: 1px solid #dedede;
}
ul.mcdropdown_menu ul li:hover + li:not(.mc_firstrow) {
border-top: 1px solid #dedede;
}
/*
* drop down shadows
*/
div.mcdropdown_shadow {
display: none;
position: absolute;
margin: 3px 0 0 3px;
/* for IE6, we use just a square transparent image */
background: #000;
filter :alpha(opacity=33);
}
/* ie6 ignores this selector */
html>body div.mcdropdown_shadow {
/* let's use a transparent PNG */
margin: 5px 0 0 5px;
padding: 5px 0 0 5px;
background: transparent url(../images/mcdropdown/shadow.png) right bottom no-repeat !important;
/* remove the filter for IE7 */
filter: none;
}
/*
* styles for the dropdown menu
*/
/* autocomplete styles */
ul.mcdropdown_autocomplete {
display: block;
position: absolute;
height: auto;
max-height: 210px;
overflow-x: hidden;
overflow-y: auto;
clear: both;
padding: 5px 10px;
background-color: #e1e0e0;
z-index: 10000;
margin: 0px;
list-style-type: none;
width: 392px;
font: 11px Arial, Helvetica, sans-serif;
}
ul.mcdropdown_autocomplete ul {
display: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul.mcdropdown_autocomplete ul li {
margin: 0px;
}
ul.mcdropdown_autocomplete li {
display: block;
font: 11px Arial, Helvetica, sans-serif;
cursor: pointer;
white-space: nowrap;
color: #666;
border-top: 1px solid #fff;
padding: 2px 26px 2px 6px;
}
ul.mcdropdown_autocomplete li.mc_endcol {
border-bottom: 1px solid #fff;
}
ul.mcdropdown_autocomplete li.mc_parent {
padding-right: 20px !important;
background: url(../images/mcdropdown/mcdd_icon_normal.gif) no-repeat 100% 50%;
}
ul.mcdropdown_autocomplete li.mc_hover {
border-top: 1px solid #999;
background-color: #999 !important;
color: #fff;
}
ul.mcdropdown_autocomplete li.mc_hover_parent {
background: #999 url(../images/mcdropdown/mcdd_icon_hover.gif) no-repeat 100% 50% !important;
color: #fff !important;
}

Add !important to your css that must be used.
.myOverride:focus {
display: block !important;
}
Just like that. This was an example, but you'd have to change it up a little to suit your needs.