html - Improper behaviour at around 600ish px width? -

html - Improper behaviour at around 600ish px width? -

whats going on my site @ minimized widths , how can prepare it?

problem

it looks on mobile phone , total screen, when sizing down, background image disappears , top bar seems acting weird (with logo doing crazy stuff) @ around 600ish pixels.

my @media query code: @media screen , (min-width:1024px) { div.large-7.push-5.columns.last{ height: emcalc(1px); } } @media screen , (max-width: 1023px) , (min-width:675 px){ //745 //481 .top-bar .toggle-topbar.menu-icon { 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 screen , (max-width: 674px) { //480 // .title-area { // max-width: 40%; //or whatever need layout. px work there, // } // .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 { 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; } }

i not sure seek next styles. hope prepare top header issues.

@media screen and(min-width:500px) , (max-width: 600px) { .top-bar .name { height:auto; } .top-bar { height:5rem; } }

html css media-queries