Okay
  Public Ticket #1342903
Flip boxes not equal height
Closed

Comments

  • Lucas started the conversation
    October 22, 2017 at 9:17am

    Hi,

    I have used the flipboxes on my site but somehow they are never equal height. One or two always differ. This changes as I change the size of my browser. 

    I have set the inner row option in which they are located to equal height but no change. Also setting the outer row to equal height doesnt work. Please help. Thanks!

  •  3,034
    Andrew replied
    October 22, 2017 at 1:34pm

    Hey there,

    Thanks for reaching in,

    Can you please send us a screenshot so we can better dive into the issue at hand?

    Regards

  • Lucas replied
    October 30, 2017 at 4:32pm

    Hi,

    I added a few each time with different widths of my browser window (all Google Chrome). Sometimes when I change the window size and then back they have equal height.

  • Lucas replied
    October 30, 2017 at 4:33pm

    few more

  •  3,034
    Andrew replied
    October 30, 2017 at 10:41pm

    Hi Lucas, 

    Thanks for the screenshots. They really helped. 

    Try using the following custom CSS code to make the flip boxes the same height. Just enter it by going to Salient > General Settings > CSS Script/ Related and scroll down to the custom CSS code section:  

    .flip-box-front, .flip-box-back{
      height: 500px!important;
    } 

    I hope this helps. Please feel free to contact us if you have any further questions. 

    Best Regards. 

  • Lucas replied
    November 5, 2017 at 4:20pm

    Cheers that worked!

  • Lucas replied
    November 26, 2017 at 11:02am

    Hi, just noticed that now on smaller screens/smaller browser screens, the text or icon moves out of the box because the width doesn't respond correctly automatically. See attached

  •  3,034
    Andrew replied
    November 27, 2017 at 5:32pm

    Hi Lucas, 

    Thank you for reaching out. 

    To fix this issue, please use the following custom CSS: 

    @media only screen and (max-width: 1080px) and (min-width: 790px){
      .flip-box-front, .flip-box-back{
      height: 460px!important;
    } 
    }

    I hope this helps. Please feel free to contact us if you have any further questions. 

    Best regards.