Website (padding) looks different on Macbook and Windows laptops

[Mantas Langaitis]

Mantas Langaitis

January 18, 2025 at 10:07 am

Hi,

I’ve discovered this issue in another tread, but decided to make a new public thread here, as I’m sure more people will come across it. I’ve just find out that for some reason the padding around the text looks different depending on whether it’s Windows or Macbook device regardless of the screen size. I ran a test on browserstack.com emulator. Please take a look at the screenshots, one is taken on Macbook Chrome browser, and another on Windows Chrome browser, see how different the padding is around text “Find Out”, “About Us” etc? Not only that but also the icon alignment is also much different where the buttons “Explore” and “Find Out” are at the bottom of the page.

I designed a website for a client and was getting complains that elements aren’t centered and couldn’t understand at first why, as it looked perfectly centered on my end (Windows) though I had to make padding-top: 9px and padding-bottom: 6px, to make it look vertically centered (which is odd and shouldn’t be like that right?).

Any ideas how to make it look consistently on both devices?

Thank you!