不仅仅在640视口中且在

Question

我很难弄清楚如何获得一个容器div我必须清除一个兄弟姐妹div。它适用于完整的桌面版本，但当我达到大约640px时，图像显示在它上面的div的一半。我在这里添加了一个片段，但由于某种原因我的图像没有显示。我相信这是因为我正在运行的插件。

这可以在我的网站上看到： click here

.box-container {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	/*height: 800px;*/
	height: 100%;
}
.dark-blue-box, .light-blue-box {
	height: 50%;
	width: 25%;
	display: inline-block;
	vertical-align: top;
	padding: 0;
	margin: 0;
	transition: all .5s ease-in-out;
}
.dark-blue-box{
	/*background-color: #66b5c6; or !!!!!!!#45a5ba!!!!
	#8fc9d6
65% 		 #7dc0cf*/
	/*background-color: rgb(69, 165, 186);*/
	background-color: #45a5ba;
}
.light-blue-box {
	background-color: #8fc9d6;
}
.dark-blue-box:hover, .light-blue-box:hover {
	background-color: purple;
	cursor: pointer;
}
.dark-blue-box:hover .box-title, .light-blue-box:hover .box-title {
	color: #FFF;
}
.dark-blue-box:hover .box-description, .light-blue-box:hover .box-description {
	display: none;
}
.dark-blue-box:hover .box-description-hover, .light-blue-box:hover .box-description-hover {
	display: block;
	color: #FFF;
	font-size: 1.5em;
	padding-top: 20px;
}
.insideBoxWrap {
	padding: 50px 18%;
}
.box-title {
	color: #307382;
	font-size: 3em;
}
.box-description {
	padding-top: 15px;
	color: #307382;
	font-size: 1.6em;
}
.box-description-hover {
	display: none;
}
.dark-blue-box:nth-child(5), .dark-blue-box:nth-child(7){
	background-color: #8fc9d6;
}
.dark-blue-box:nth-child(5):hover, .dark-blue-box:nth-child(7):hover{
	background-color: purple;
}
.light-blue-box:nth-child(6), .light-blue-box:nth-child(8){
	background-color: #45a5ba;
}
.light-blue-box:nth-child(6):hover, .light-blue-box:nth-child(8):hover{
	background-color: purple;
}

/*---Home Img-----*/
.home-img {
	/*position: relative;
	max-width: 100%;*/
	position: relative;
	margin: auto;
	width: 100%;
	height: auto;
	vertical-align: middle;
}
.home-img img {
	width: 100%;
	position: absolute;
}
.parallax-window {
   min-height: 600px;
    background: transparent;
}
.home-img-text {
	position: relative;
	z-index: 99;
	color: #FFF;
	font-size: 4em;
	text-align: center;
	top: 40%;
}
/*----------------------------------------------PHONE MEDIA QUERY 640--------------------------*/

@media screen and (max-width:640px) {
	.box-container {
		width: 100%;
		height: 50%;
	}
	.dark-blue-box, .light-blue-box {
		height: 50%;
		width: 100%;
		display: block;
	}
	.dark-blue-box:hover, .light-blue-box:hover {
		height: 100%;
	}
	.dark-blue-box:hover .box-description-hover, .light-blue-box:hover .box-description-hover {
		display: block;
		font-size: 1.1em;
		padding-top: 20px;
	}
	.dark-blue-box:nth-child(5), .dark-blue-box:nth-child(7){
		background-color: #45a5ba;
	}
	.light-blue-box:nth-child(6), .light-blue-box:nth-child(8){
		background-color: #8fc9d6;
	}
	.insideBoxWrap {
		padding: 30px 30px;
	}
	.box-title {
		font-size: 1.6em;
	}
	.box-description {
		padding-top: 5px;
		font-size: 1.1em;
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/parallax.js-1.3.1/parallax.js"></script>
<div class="box-container">
  <div class="dark-blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Brand Strategy</div>
      <div class="box-description">Digital Roadmap</div>
      <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs
	  fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div>
    </div>
  </div><div class="light-blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Development</div>
      <div class="box-description">That Outperforms</div>
      <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs
	  fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div>
    </div>
  </div><div class="dark-blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Visual Identity</div>
      <div class="box-description">That Is Timeless</div>
      <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs
	  fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div>
    </div>
  </div><div class="light-blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Interactivity</div>
      <div class="box-description">For Engagement</div>
      <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs
	  fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div>
    </div>
  </div><div class="dark-blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Responsive</div>
      <div class="box-description">Web Layout</div>
      <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs
	  fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div>
    </div>
  </div><div class="light-blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Ecommerce</div>
      <div class="box-description">Conversion Focused</div>
      <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs
	  fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div>
    </div>
  </div><div class="dark-blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Dynamic</div>
      <div class="box-description">Functionality</div>
      <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs
	  fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div>
    </div>
  </div><div class="light-blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Illustration</div>
      <div class="box-description">All Hand-Made</div>
      <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs
	  fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div>
    </div>
  </div>
</div>
<div style="clear:both;"></div>
<div>
 fdsgfdsfadsg <br><br><br><br><br><br><br><br><br>
</div>
<div class="home-img">
	<!--<img src="http://optimumwebdesigns.com/images/try.jpg" alt=""> -->
	<div class="parallax-window" data-parallax="scroll" data-image-src="http://optimumwebdesigns.com/images/try.jpg">
		<div class="home-img-text">Quality Solutions</div>
	</div>
</div>
<div>
 fdsgfdsfadsg <br><br><br><br><br><br><br><br><br>
</div>