Community Forums › Forums › Archived Forums › Design Tips and Tricks › Parallax Pro: Need help aligning the images with overlays in the page centre.
Tagged: css, genesis, html, media queries, responsive design
- This topic has 1 reply, 2 voices, and was last updated 9 years, 3 months ago by Jeremy Holden.
-
AuthorPosts
-
January 22, 2015 at 9:17 am #138217KrishanMember
Hi,
I am finding it quite hard to align the images in the center of the pages especially in the mobile devices. The images are circles at website http://www.ew3tech.com/#section_2.
HTML that I used for each circle in the widget area :
<div class="big-box">
<div class="box">
<div class="overbox">
<div class="title"> Planning </div>
</div>
</div><div class="box">
<div class="overbox">
<div class="title"> Design</div>
</div>
</div><div class="box">
<div class="overbox">
<div class="title"> Development </div>
</div>
</div><div class="box">
<div class="overbox">
<div class="title"> Launch </div>
</div>
</div>
<div class="clear"></div>
</div>The custom CSS that I used to style these elements in the style.css:
/*four phases of design and development icons for desktop devices*/
.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 these are too many media queries, but I am overwhelmed that I am not able to make these circles fluid so that they respond according to the screen size.
Please help as I am finding it quite hard to manage them.
Please look at the website in mobile devices like iphones or andriod devices to see what I am trying to say.Thanks
Kulwinder Krishan
I love helping people with Any Genesis Theme Customizations.
Check my website at http://www.ew3tech.comJanuary 23, 2015 at 9:22 pm #138484Jeremy HoldenParticipantI would work with the built in column classes. I played with it and made some changes and was able to get everything to center at any screen size.
Here's what I used for html:
<div class="big-box"> <div class="one-fourth first 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="one-fourth 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="one-fourth box"> <img src="http://www.ew3tech.com/wp-content/uploads/2015/01/coding.png" alt="development"> <div class="overbox one-fourth"> <div class="title"><a href="http://www.ew3tech.com/services/#development"> Development </a></div> </div> </div> <div class="one-fourth box"> <img src="http://www.ew3tech.com/wp-content/uploads/2015/01/launch.png" alt="launch"> <div class="overbox one-fourth"> <div class="title"> <a href="http://www.ew3tech.com/services/#launch">Launch</a> </div> </div> </div> <div class="clear"></div> </div>
And here's the css:
/* Newly Added CSS*/ /*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; */ text-align: center; /* margin: 0 auto; */ } .box .overbox a{ display: block; background:#323248; position:absolute; top:0; left: 0; color:#fff; z-index:100; opacity:0; height: 170px; width: 170px; border-radius:50%; padding-top: 60px; margin: 0 auto; text-align: center; right: 0; } .overbox { width: 100%; margin: 0 auto; text-align: center; }
Jeremy
Website design and Genesis customization
jeremyholden.me -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.