What is happening with my website when the width is minimized, and how can I resolve it?
Issue
The website appears fine on mobile devices and full screens, but at reduced sizes, the background image disappears and the top bar behaves strangely (with the logo acting erratically) around 600 pixels.
My custom @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 {
...
}
path-container .path-item .circle.circle-right {
right: 90px;
}
.path-container {
text-align: center;
}
.path-container .circle {
...
}