-
Posts
-
How to give space between flip box grid elements ? Like if I have 3 in a row, I want some space between them.
Hey sarthakchoudhary,
Thanks for the info @Guenni007!
@sarthakchoudhary: Please try the suggestion above.Best regards,
Ismaelwe Participants could not see the answers !
now it seems to work – so i try that double post:The flipbox was completely changed to flexbox layout.
The spacing can be set in the ALB for items in a row and for the distance between the rows.Now you have to know the possibility to distribute the items in a way that the outer items have no distance to the edges ( space-between ) and the remaining space is divided evenly.
The next would be “space-around” – there the distance to the outside is half as big as the distance between the cells.
With “space-evenly” the outer distances are equal to those between the cells.simple Answers could be seen – but if there are images or links inside – these answers are not visible for Participants!
The flipbox was completely changed to flexbox layout.
The spacing can be set in the ALB for items in a row and for the distance between the rows.
Now you have to know the possibility to distribute the items in a way that the outer items have no distance to the edges ( space-between ) and the remaining space is divided evenly.
The next would be “space-around” – there the distance to the outside is half as big as the distance between the cells.
With “space-evenly” the outer distances are equal to those between the cells.Hi,
@sarthakchoudhary I tried to create a 3 flip box row as an example to understand what you want to achieve in regrades to “space” between the flip boxes, I used the Inverse Layout to show the backsides and due to the padding they seem to have space between them.
If I add a background color it then seems like there is no space:.avia-icongrid-flipback { background-color: lightgray; }
To give it some space in this situation change the margin like this:.avia-icongrid-numrow-3 .av-icon-cell-item { flex: 0 1 32%; }
If this doesn’t help please explain with more detail and link to a test page and perhaps a screenshot would help.Best regards,
Mike
- You must be logged in to reply to this topic.