Jump to content

space between boxes


mindapolis

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
   }

 

Link to comment
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;
}

 

Link to comment
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.

Link to comment
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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

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.