Menu icon Foundation
media query problems ~480 - 640 px

Hi friends, so I have a problem that I'm trying to figure out a solution for because my page is doing well at most resolutions except around the 480-640px width range, my logo gets funky and background image disappears and I'm not sure why. I'm trying to figure out the way to optimize the site for all ranges including small medium and large but having trouble.

right now for small widths I have:

  @media only screen and (max-width: 640px) { //674 //480

 #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;
  
		}

      }

and for ~medium ranges I have:

@media only screen and (max-width: 1024px) and (min-width: 641px) {
  .line {
    display: none !important;
  }
  .large-5.columns.path-text {
    width: 70%;
    right: 0;
    margin-left: 15px;
  }
  .path-item .large-7 {
    width: 25%;
  }
  .push-5 {
    left: 0;
    float: right;
  }
  .circle-right{
    float: left;
    right: 0px !important;
  }
  .circle-left{
    left: 0px !important;
  }
}

My Site is located at www.omegadesignla.com If you could check it out, and let me know any ideas I would appreciate it, thanks.

htmlcss@media query

Hi friends, so I have a problem that I'm trying to figure out a solution for because my page is doing well at most resolutions except around the 480-640px width range, my logo gets funky and background image disappears and I'm not sure why. I'm trying to figure out the way to optimize the site for all ranges including small medium and large but having trouble.

right now for small widths I have:

  @media only screen and (max-width: 640px) { //674 //480

 #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;
  
		}

      }

and for ~medium ranges I have:

@media only screen and (max-width: 1024px) and (min-width: 641px) {
  .line {
    display: none !important;
  }
  .large-5.columns.path-text {
    width: 70%;
    right: 0;
    margin-left: 15px;
  }
  .path-item .large-7 {
    width: 25%;
  }
  .push-5 {
    left: 0;
    float: right;
  }
  .circle-right{
    float: left;
    right: 0px !important;
  }
  .circle-left{
    left: 0px !important;
  }
}

My Site is located at www.omegadesignla.com If you could check it out, and let me know any ideas I would appreciate it, thanks.

Ryan Hellerud almost 5 years ago

dang no love?

Rafi Benkual almost 5 years ago

What do you want the logo to do? Do you want to overlay the image? Another option is to make the top-bar taller, even on mobile.

The top-bar is functioning as intended. If you open the emu on mobile, you will see your logo is hidden properly as to not overlay the list items.

Your best bet is to make top-bar taller to contain the logo or position it absolutely over the topbar.