Jump to content
mindapolis

space between boxes

Recommended Posts

Hi, on http://theascentguide.com/test/ can someone please help me understand why I can't put space between the boxes?  Also, when the boxes flip I can't get them to be the same height.  I have tried everything I know but nothing is working.  Some help would be very much appreciated.  

}
57

58
.flip3D:hover > .back{
59
  transform: perspective(600px) rotateY(0deg);
60
  -webkit-transform: perspective(600px) rotateY(0deg);
61
}
62

63
#contactUs {
64
  clear:left;
65
  background-color:#79A696;
66
  height:80px;
67
  width:210px;
68
  
69
  margin-top:120px;
70
  margin-left:auto;;
71
  margin-right:auto;
72
  border-radius:50%;
73
  text-align:center;
74
  color:#ffffff;
75
  font-family:'Chivo', sans-serif;
76
  font-size:24pt;
77
}
78
#footer-core {
79
  text-align:center; 
80
}
81
#header-core {
82
  display:none;
83
}
84
#sub-footer {
85
  display:none;
86
}
87

88
flip3D > .front {
89
    display: block;
90
    margin-left: 56px;
91
    position: relative;
92
    transform: perspective(600px) rotateY(0deg);
93
    background: #79A696;
94

    width: calc;
95
    min-height: 250px;
96
    border-radius: 7px;
97
    backface-visibility: hidden;
98
    font-size: 24pt;
99

    vertical-align: middle;
100
   }

 

Share this post


Link to post
Share on other sites

You've got a lot of styling going on. A lot that needs to be pruned.

Demo

Share this post


Link to post
Share on other sites

I redid some of it but it didn't help.  


#mainText {
	margin-left:15px; 
	margin-top:5px;

}
.front {
	display:block;
	position:relative;
	min-height:255px;
}
.flip3D {
	width:305px;
	height:255px;
	float:left;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:150px
}


.flip3D > .front {
	margin-right:5px;
	position:absolute;
	transform:perspective(600px) rotateY(0deg); 
	-webkit-transform:perspective(600px) rotateY(0deg);
background:#79A696;width:305px; height:22px;/*won't change height.*/ 
	border-radius:7px;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	transition:transform .5s linear 0s;
	transition: -webkit-transform .5s linear 0s;
	font-size:24pt;
	
}

.flip3D > .back {
	margin-right:5px;
	position:absolute;
    transform:perspective(600px) rotateY(180deg); 
	-webkit-transform:perspective(600px) rotateY(180deg); 
    background:black; width:305px; 
	height:225px; /*change the box height*/
	border-radius:7px;
	padding:10px;
	color:#ffffff;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	transition:transform .5s linear 0s;
	transition: -webkit-transform .5s linear 0s;
}

.flip3D:hover > .front{
	transform: perspective(600px) rotateY(-180deg);
	-webkit-transform: perspective(600px) rotateY(-180deg);
}

.flip3D:hover > .back{
	transform: perspective(600px) rotateY(0deg);
	-webkit-transform: perspective(600px) rotateY(0deg);
}

#contactUs {
	clear:left;
	background-color:#79A696;
	height:80px;
	width:210px;
	
	margin-top:120px;
	margin-left:auto;;
	margin-right:auto;
	border-radius:50%;
	text-align:center;
	color:#ffffff;
	font-family:'Chivo', sans-serif;
	font-size:24pt;
}
#footer-core {
	text-align:center; 
}
#header-core {
	display:none;
}
#sub-footer {
	display:none;
}

#footer-core h3.footer-widget-title {
  display: none;
}

 

Share this post


Link to post
Share on other sites

You still have a lot of styling going on. Margins. Padding. Widths and heights. A stray <p>. A flip3D inside an infoBox. The contactUs in there as well. They all contribute to messing up alignment.

There should be one container for the three visual boxes (your flip3D), and each of those boxes contains the front and back panels. Those two panels should not have any margins. The flip3D boxes should only have enough margin to space them apart from each other, and you'd to that with a .flip3D+.flip3D { margin-left: whatever }. Everything else, like the contact us button, belong outside of all this.

Rearrange the markup and try this: forget all the styles you've applied, copy what I did in the demo, then add colors and formatting and padding (to the front/back panels) and that margin-left to go towards your end result.

Share this post


Link to post
Share on other sites

Each front+back pair needs a flip3D container so that the two can be placed on top of each other.

main container ( flip container 1 ( front + back ) + flip container 2 ( front + back ) + flip container 3 ( front + back ) )

Share this post


Link to post
Share on other sites

okay things are going better but the .flip3D+.flip3D {margin-left:5px isn't doing anything.  

Share this post


Link to post
Share on other sites

Well, you've made it worse. You now have a couple extra <p>s in there, which will prevent the .flip3D+.flip3D from doing anything, and you still aren't wrapping them all in a container that's dedicated to just those three boxes.

Forget your code for a while. Look at my demo. Learn what it does and how it works. Understand what the containers are for and what effect the CSS has. Then apply what you've learned by adjusting your HTML and CSS to match.

You will not fix your problem by adding even more HTML and CSS into the mix. You have too much as it is.

Share this post


Link to post
Share on other sites
<p><!--End of flip3D container --></p>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.