javascriptjqueryhtmlcss

Alternative background-color for sibling div

I am running into an issue for this system I am creating. I have a total of four sibling div containers. They go like this in a normal desktop view:

Blue Red Blue Red

This works for 2/3 viewports to show the background-color's as an alternate color. It works in the normal desktop mode and a 640px screen and below, but for my middle viewport 640-840px's, the screen shows the colors like this:

Blue Red

Blue Red

Which will make it very difficult to read. Basically I will need the divs' color to change in a pattern like this:

Blue Red

Red Blue

Is there a way I can accomplish this?

body {
	margin: 0;
}
.box-container {
	position: absolute;
	width: 100%;
	margin: 0;
	padding: 0;
	height: 100%;
}
.blue-box, .red-box {
	height: 50%;
	width: 25%;
	display: inline-block;
	vertical-align: top;
	padding: 0;
	margin: 0;
	transition: all .5s ease-in-out;
}
.blue-box {
	background-color: blue;
}
.red-box {
	background-color: red;
}
.blue-box:hover, .red-box:hover {
	background-color: purple;
	cursor: pointer;
}
.blue-box:hover .box-description, .red-box:hover .box-description {
	display: none;
}
.blue-box:hover .box-description-hover, .red-box:hover .box-description-hover {
	display: block;
	color: #FFF;
	font-size: 1.5em;
	padding-top: 20px;
}
.insideBoxWrap {
	padding: 50px 18%;
}
.box-title {
	color: #FFF;
	font-size: 2.6em;
}
.box-description {
	padding-top: 15px;
	color: green;
	font-size: 1.5em;
}
.box-description-hover {
	display: none;
}
/*----------------------------------------------PHONE MEDIA QUERY 640--------------------------*/

@media screen and (max-width:640px) {
	.box-container {
		width: 100%;
		height: 50%;
	}
	.blue-box, .red-box {
		height: 50%;
		width: 100%;
		display: block;
	}
	.blue-box:hover, .red-box:hover {
		height: 100%;
	}
	.blue-box:hover .box-description-hover, .red-box:hover .box-description-hover {
		display: block;
		color: #FFF;
		font-size: 1.1em;
		padding-top: 20px;
	}
	.insideBoxWrap {
		padding: 30px 30px;
	}
	.box-title {
		font-size: 1.6em;
	}
	.box-description {
		padding-top: 5px;
		color: green;
		font-size: 1.1em;
	}
}	
/*----------------------------------------------PHONE MEDIA QUERY 641 - 840--------------------------*/

@media screen and (min-width: 640px) and (max-width:840px) {
	.box-container {
		width: 100%;
		height: 100%;
	}
	.blue-box, .red-box {
		height: 33%;
		width: 50%;
		display: inline-block;
	}
}
<div class="box-container">
  <div class="blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 1</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div><div class="red-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 2</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div><div class="blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 3</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div><div class="red-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 4</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div>
</div>

Solution

  • add this:

    CodePen

    .blue-box:nth-child(3){
    background-color:red;
 }
.red-box:nth-child(4){
   background-color:blue;
}

    to the @media screen and (min-width: 640px) and (max-width:840px)