Hello,
I’m a webflow novice, and am trying to create a team page for our organization, but every circle keeps resizing to an oval whenever the screen is too small, instead of scaling down. How can I fix this?
Here is my site Read-Only: (Webflow - Caelus Actual)
You’ve answered your own question 
The circles are in a container element that has a max width on tablet of 728px.
Now look at the size of each of your circles: they have a width on tablet of 190px each.
4 circles? Multiply 190px by 4 and you get 760px. Add the grid padding and each circle element is to wide to be able to fit in the container: so Webflow squeezes each circle to fit the allotted space and turns them into ovals.
The solution here is to resize the circle element. For example, if you make each circle 80px x 80px, the total width of the four circles is 320px, which easily fits into the 728px container on the tablet breakpoint. Or you could reduce the columns and have bigger circles as you have for the mobile breakpoints.
(I’ve just noticed you have the same issue on the desktop breakpoint: the smallest desktop size is about 990px, so if you resize the circles to about 200px you should be fine)
One easy way to fix this would be sizing them by VW units - for example, set the height and width to 5vw and they will scale as the screen gets smaller.
Also, if you just upload a square image and then dont set a height to it - it should scale while maintaining it’s shape
