Okay
  Public Ticket #1342903
Flip boxes not equal height
Closed

Comments

  • Lucas started the conversation

    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!

  •  2,679
    Andrew replied

    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

    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

    few more

  •  2,679
    Andrew replied

    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

    Cheers that worked!

  • Lucas replied

    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

  •  2,679
    Andrew replied

    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.