Improper behaviour at around 600ish px width? - html

Question

Whats going on with my site at minimized widths and how can I fix it?
Problem
It looks good on a mobile phone and full screen, but when sizing down, my background image disappears and the top bar seems to be acting weird (with the logo doing crazy stuff) at around 600ish pixels.
My #media query code:
#media only screen and (min-width:1024px)
{
div.large-7.push-5.columns.last{
height: emCalc(1px);
}
}
#media only screen and (max-width: 1023px) and (min-width:675 px){ //745 //481
.top-bar .toggle-topbar.menu-icon a {
color: $steel;
height: 34px;
line-height: 33px;
padding: 0 25px 0 0;
position: relative;
}
.container{
/*background: linear-gradient(to bottom, yellow, magenta);*/
height: 66rem; /*645px*/
//overflow: hidden;
background-image: url('/img/losang.jpg');
background-size: 100%;
background-repeat: no-repeat;
}
.top-bar{
// overflow: hidden;
}
.top-bar .toggle-topbar.menu-icon a:after {
box-shadow: 0 10px 0 1px $steel, 0 16px 0 1px $steel, 0 22px 0 1px $steel;
content: "";
display: block;
height: 0;
position: absolute;
right: 5px;
top: 0;
width: 16px;
}
}
#media only screen and (max-width: 674px) { //480
// .title-area {
// max-width: 40%; //or whatever you need for your layout. px will work there, too
// }
// .title-area .logo {
// width: 100%;
// height: auto;
// }
#icons .hover1 {
.iconlinks {
color:$iconcolor1;
}
}
#icons .hover2 {
.iconlinks {
color:$iconcolor2;
}
}
#icons .hover3 {
.iconlinks {
color:$iconcolor3;
}
}
.path-container .path-item .circle.circle-right {
right: 90px;
}
.path-container {
text-align: center;
}
.path-container .circle {
top: 0;
// right: 0;
// left: 0;
float: none;
margin-bottom: 30px !important;
margin-top: 60px;
margin-left: auto;
margin-right: auto;
}
.top-bar .toggle-topbar.menu-icon a {
color: $steel;
height: 34px;
line-height: 33px;
padding: 0 25px 0 0;
position: relative;
}
.top-bar .toggle-topbar.menu-icon a:after {
box-shadow: 0 10px 0 1px $steel, 0 16px 0 1px $steel, 0 22px 0 1px $steel;
content: "";
display: block;
height: 0;
position: absolute;
right: 5px;
top: 0;
width: 16px;
}
.top-bar {
overflow: hidden;
}
.orbit-container{
height: 12.5rem;
}
.container{
/*background: linear-gradient(to bottom, yellow, magenta);*/
height: 66rem; /*645px*/
overflow: hidden;
background-image: url('/img/losang.jpg');
background-size: 100%;
background-repeat: no-repeat;
/*background-color: #ccc;
.container{
/*background: linear-gradient(to bottom, yellow, magenta);*/
//height: 65rem; /*645px*/
// background-color: blue;
}
.servicesminicontainer{
margin-top:emCalc(0px);
}
.serviceimgs{
margin: emCalc(0px) auto;
}
.servicescontainer{
/*background: linear-gradient(to bottom, yellow, magenta);*/
// height:40rem; /*645px*/
overflow: hidden;
background: none;
/*background-image: url('../img/laback.jpg');*/
background-size: 100%;
//background-repeat: no-repeat;
// background-color: rgba(30,144,255, .7)
//background: linear-gradient(to bottom, $background-color-top, white);
//background-image: url('../img/losang.jpg');
}
#icons{
position: relative;
top: initial;
margin-top: 50px
}
.logo{
width: 50%;
// position:relative;
// top:emCalc(-27px);
}
#topbutton{
position: relative;
top: 2rem;
}
#icons{
/*position: relative;
top:6rem;*/
}
.container1 p, h4{
color:black;
}
header{
margin-top: 0rem;
background-image: none;
}
}

Answer 1

I am not sure try with the following styles. Hope it will fix the top header issues.
#media only screen and(min-width:500px) and (max-width: 600px)
{
.top-bar .name
{
height:auto;
}
.top-bar
{
height:5rem;
}
}