Making background div a perfect circle issue

Design help General
1

Hi

I’m having difficulty making some background divs into perfect circles. Please see my short screenshare video below for an explanation.
CloudApp

My share link is below. I’d be very thankful for any help.

Cheers, Graham

Here is my site Read-Only: https://webflow.com/design/mortgagewithbadcredit-co-uk?pageId=5c93933e81aba613661d89ab
(how to share your site Read-Only link)

2

Hello @GrahamCox,

So if you want perfect circles what you have to do is to first have a square div, it has to be a square, then you go to borders and select the radius to 50%. That should make your div into a perfect circle.

1 Like
3

Hi

Thank you for your help @Pablo_Cortes. I don’t think that’s the issue though. They are in divs and making them the same width and height before applying the radius doesn’t make any difference.

See new video here:
CloudApp

I think it might be to do with using flex and the copy next to it being on two lines, but not sure.

If anyone can help with this I’d be very grateful.

Many thanks,

Graham

4

Hello @GrahamCox,

I tried to look into your site, but your read only link is not working. I see what you mean on the video. I think the image that you have inside the div is making it look more oval that a circle. Try to make the div into a circle first and then add the image inside making sure that its dimensions don’t exceed that of the div itself. I hope this can help. Also, if you update your read only link maybe I could better help you.

5

Hi @Pablo_Cortes,

Thanks for your reply. I tried removing the image on the left circle but didn’t seem to help.

This is the global share link…
https://preview.webflow.com/preview/mortgagewithbadcredit-co-uk?utm_source=mortgagewithbadcredit-co-uk&preview=4702ed782186ef65ec6f1eb0ff59e4c9&mode=preview

The page is called Qualify Thanks.

Thanks again, I appreciate your help.

Cheers, Graham

6

Hello @GrahamCox,

So I got to see your website on the designer using your link. So the problems with the circular div was that the text next to it was pushing it to the div borders and thus creating the oval effect. I change the size of the other text and the problem got corrected.

55%20PM
55%20PM1023×138 13.6 KB

So to fix your layout, create three div blocks with a 10 margin on both sides for the middle div.
16%20PM
16%20PM1053×156 12.7 KB

Then give the first div the same height and width and set the radius to 50%, and add the text that you want on the other divs.
49%20PM
49%20PM1030×125 15.6 KB

I think that would help your issue. Keep in mind that sometimes is better to set a width in px or % rather than using auto. Good Luck with your website. Let me know if you have more questions.

7

Hi @Pablo_Cortes

Thanks very much for the feedback. I’ve tried your suggestion but still no joy I’m afraid. Here’s a quick video:
CloudApp

Thank you.

Graham

8

HI @Pablo_Cortes

I’ve managed to fix it by stacking the 3 elements vertically.

Thanks again, cheers.

Graham

1 Like
9

No worries @GrahamCox, Im glad you got a solution for your problem. Take care.

1 Like