Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 13, 2024 at 12:33 pm #1429975
    ausgesonnen

    Hi there,
    I need your advise. I m trying to code this static design with round flipboxes:
    Screenshot-2024-01-13-at-12-28-39

    what I managed to do so far is to produce square boxes. See here:

    home

    How can I turn the square boxes into circles with fixed ratio?

    Thank you so much
    Peter

    January 13, 2024 at 8:09 pm #1430006
    Mike

    Hey ausgesonnen,
    Try this css:

    .avia-icongrid-front,.avia-icongrid-flipback {
	  border-radius: 100%;
	  min-height: 460px;
}

    you must set the min-height or it will be oval due to the inner content.
    This is the expected results:
    Enfold_Support_4429.jpeg

    Best regards,
    Mike

    January 15, 2024 at 11:12 am #1430140
    ausgesonnen

    Hi Mike,
    ok, I included the css. Thanks. The boxes do still go oval upon resizing the window. I am not sure what you mean by “you must set the min-height or it will be oval due to the inner content.” In the CSS you supplied, the min height is already set, right? Is there anything else I need to do or is it simply not possible to avoid the oval reshaping?

    January 15, 2024 at 6:31 pm #1430181
    Mike

    Hi,
    Unfortunately the min height will need to be adjusted multiple times for the different screen width and the font sixe for the back side will need to be smaller to make up for the lost space. It doesn’t look like there is a “easy” fit for this.
    You could use the css above as an example and then use media queries to assign different heights for the different screen sizes that are commonly used, but it won’t be a “fluid” change for all screen sizes.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.