I recommend asking at https://ww.wp.xz.cn/support/theme/alante#new-post so the theme’s developers and support community can help you with this.
your .front div has an absolute width. change that to a relative one.
hello, @mindiapolis
Use this in your additional CSS you will get space between the block.
.front {
display: block;
margin-left: 56px;
position: relative;
min-height: 250px;
}
Neither one of those suggestions helped.
@mindiapolis, it works here I just again check it.
I guess you’re doing something wrong while putting the code in style.css
use this and remove your code which you’re using right now for same classes.
.flip3D > .front {
display: block;
margin-left: 56px;
position: relative;
transform: perspective(600px) rotateY(0deg);
background: #79A696;
width: calc(100% - 25px);
min-height: 250px;
border-radius: 7px;
backface-visibility: hidden;
font-size: 24pt;
vertical-align: middle;
}
unfortunately that didn’t help.
Also, how can I make the boxes the same height when they flip? if you could answer these two questions ASAP that would be great!
I reworked some of the CSS but still can’t resolve either problem. Also,, how can I get the boxes to be the same height when they flip? Sharla
l
#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;
}
