Mobile UI issue

Hey everyone, Ive just made my first project using webflow and I did it in mobile version only. Its a menu for a restaurant. I used the tabs element to get a slider for all the categories ( salads, soups, etc). On the tabs element Ive put a cirlce div and a heading block and have made outlines of those of them to be differently sized so that it appears like one cirle(div block) with heading, then two outlines of circles like this

Ive checked it out on every size from 240px to 460px and it looks fine on my laptop viewer
but when i open it on my phone (iphone X) it appears differently, shows up like this for some other Iphones aswell.

The circles look normal on phones with bigger screens like iphone 12 onwars…
Please help

look like a Safari issue

  1. test on iphone with Chrome
    2 try use px intead of % and set the width and hieght explicitly everywhere set the border radius in px too.

Thanks alot for the reply. Tried both and still dint work :confused: