Community Forums › Forums › Archived Forums › Design Tips and Tricks › Parallax Pro: Need help making the images with overlays responsive for mobile
Tagged: css, html, media queries, responsive design
- This topic has 2 replies, 2 voices, and was last updated 9 years, 3 months ago by Krishan.
-
AuthorPosts
-
January 22, 2015 at 5:13 am #138249KrishanMember
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.comJanuary 22, 2015 at 6:02 am #138251Genesis DeveloperMemberI checked on iPad. I'm not getting any issue
January 22, 2015 at 6:07 am #138252KrishanMemberPlease 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 -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.