Creating Equal Sized Circle Groups

Need help Responsiveness
1

Hi all,

Bit of a silly one today but I’m struggling. Trying to create a two row group with 4 columns for circles (8 circle groups in total).

The issue I’m having is trying to get the circles to actually stay as circles and not elongate horizontally or vertically based on the user’s browser width/height.

Inspiration:

image
image834×575 34.5 KB

Right now I’ve got a Main Group with min width & height of 40 and no max.
Inside this is the first row group with 40 min width, inf max width, 0 min height, 245px max height. Then each circle group is min width 0, max width inf, min height 0 px, max height 100%.

On a bigger screen they obviously end up elongated. Any help much appreciated, cheers all.

2

Have you tried just setting the aspect ratio 1:1?

3

I don’t think you can for groups, if you can I’d love to see where?

4

You could just make the circles fixed width and adjust their size based on breakpoints.

or

you set the image element (symbols) to a 1:1 aspect ratio and then add the same overall padding to the parent group. Then, for the image element (where the symbol image is set as the background), you define a min and max width.

1 Like