Parallax Pro: Need help making the images with overlays responsive for mobile

[Krishan]

Hi,

The images are the circles on website http://www.ew3tech.com#sections_2 with overlays. Or go to the website at http://www.ew3tech.com and then click on find out more to go the section containing circles.

HTML that I used to create the images with overlays in the widget section is as below:

<div class="big-box">
<div class="box">
<img src="http://www.ew3tech.com/wp-content/uploads/2015/01/planning.png" alt="planning">
  <div class="overbox">
    <div class="title"><a href ="http://www.ew3tech.com/services/#planning"> Planning </a></div>
  </div>
</div>

<div class="box"> <img src="http://www.ew3tech.com/wp-content/uploads/2015/01/design.png" alt="design">
  <div class="overbox">
    <div class="title"> <a href ="http://www.ew3tech.com/services#design">Design</a></div>
  </div>
</div>

<div class="box"> <img src="http://www.ew3tech.com/wp-content/uploads/2015/01/coding.png" alt="development">
  <div class="overbox">
    <div class="title"><a href ="http://www.ew3tech.com/services/#development"> Development </a></div>
  </div>
</div>

<div class="box"> <img src="http://www.ew3tech.com/wp-content/uploads/2015/01/launch.png" alt="launch">
  <div class="overbox">
    <div class="title"> <a href ="http://www.ew3tech.com/services/#launch">Launch</a> </div>
  </div>
</div>
<div class="clear"></div>
</div>

Custom CSS that I used to style the custom elements is as below:

/*four phases of design and development icons*/
	.big-box{
		margin:auto;
		width: 67%;
		height:auto;
	}
	.clear{
		clear:both;
	}

	.box{
		cursor:pointer;
		height: 170px;
		width: 170px;
		float:left;
		position:relative;
		overflow:hidden;
		margin-left: 15px;
		
	}
	.box .overbox a{
		display: block;
		background:#323248;
		position:absolute;
		top:0;
		color:#fff;
		z-index:100;
		opacity:0;
		height: 100%;
		width: 100%;
		border-radius:50%;
		padding-top: 60px;
	}
.box .overbox a:hover{opacity:0.85;}	

@media only screen and (max-width: 1140px) {
	.big-box{
		width:79% !important;
	}
}

@media only screen and (max-width: 960px) {
	.big-box{
		width:100% !important;
	}
}

@media only screen and (max-width: 768px) {
	.big-box{
		width:56.5% !important;
	}
}

@media only screen and (max-width: 735px) {
	.big-box{
		width:61% !important;
	}
}

@media only screen and (max-width: 480px) {
	.big-box{
		width:100% !important;
	}
}

@media only screen and (max-width: 411px) {
	.big-box{
		width:60% !important;
	}
}

I know, I have used too many media queries but the problem is that I have tried a lot of ways to make them always align themselves in the centre of the section in all mobile device size or make them responsive in other words.

I will really appreciate if somebody can help me with the issue.

Thanks

---

Kulwinder Krishan
I love helping people with Any Genesis Theme Customizations.
Check my website at http://www.ew3tech.com

http://www.ew3tech.com

[Genesis Developer]

I checked on iPad. I'm not getting any issue

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[Krishan]

Please check on iphones and android phones in both the portrait and landscape mode if you have access to them.

Thanks

---

Kulwinder Krishan
I love helping people with Any Genesis Theme Customizations.
Check my website at http://www.ew3tech.com

[Author]

Posts