Name and properties of blocks:

Circle left:

#left_b {margin-top: 65px; float: left; width: 175px; height: 240px;}

Problem block - button Order a call and a white rectangle:

 #middle_b {float: left; height: 305px; width: 445px; padding-left: 70px; margin-top: 0px;}

The circle on the right:

 #right_b {margin-top: 65px; margin-left: 104px; float: left; width: 175px; height: 240px;}

  • On the first screen - so the layout looks on Chrome and Opera browsers on Windows (and so it should be). For Edge it was necessary to add:

      @supports (-ms-accelerator:true) { #midle_b { margin-top: -45px !important; } }

    Screen windows

  • On the second screenshot, this is what Chrome and Opera browsers look like on Mac OS (asks margin-top: 28px). When middle_b drops to 28px, the inscription with a white joystick also becomes in place

Screen mac os

  • On the third screenshot - on Safari

Screen safari

Tell me how to fix

The green block with the joystick has the following properties:

  position: relative; top: -19px; display: inline-block; padding-left: 29px
  • you can try changing the margin to padding. - NeedHate
  • all the code to see. Layout itself is not clear, and @media requests are not visible - screenshots will not help here, is the site on a remote site or on LAN? - user33274
  • @LenovoID link to the problem page - Kakao Developer

1 answer 1

Honestly, it seems to me that it would be necessary to completely change the whole layout of the site, more than a bunch of jambs and even the place where two columns with text could be wrapped in

 <table></table>

A bunch of padings are not clear, but for the phone, then it is generally shifted in different directions.