Support » Fixing WordPress » space between boxes

  • Hi, why can’t I put any space between the between the boxes? I put margin-right:50x; just for testing purposes on both the infoBox and the .flip3D .Front classes but neither worked.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    I recommend asking at https://wordpress.org/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;
      }
    Thread Starter mindiapolis

    (@mindiapolis)

    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;
       }
    Thread Starter mindiapolis

    (@mindiapolis)

    unfortunately that didn’t help.

    Thread Starter mindiapolis

    (@mindiapolis)

    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!

    Thread Starter mindiapolis

    (@mindiapolis)

    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;
    }
    
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘space between boxes’ is closed to new replies.