'Why does my webpage sizing change between mac and windows

I develop on windows using nextjs, but when I view my websites from a mac they always appear much smaller in font size, padding, margin, everything.

An example that's online is cspros

With screenshots, this is another one viewed on windows in chrome

and this is on a mac using chrome and it's also the same size on a chromebook

The CSS that controls my sizing is

  .responsive {
    @apply max-w-6xl mx-auto
}

And is the github of that project with the code of my homepage below

    <div className="min-h-screen w-full bg-[#FFFAEC]">
  <Head>
    <title>Computer Science Professionals</title>
    <link rel="icon" href="/favicon.ico" />
  </Head>

  {/* navbar */}
  <Header home active="/" />
  {/* Hero and CTA button */}
  <main className="responsive flex space-x-20 pt-40">
    <div className="">
      {/* Comment */}
      <div className="flex items-center space-x-2 text-[0.7rem] text-accent-default">
        <CheckCircleIcon className="h-5 w-5" />
        <p>"This site is how I got a 9" - Harry Russin</p>
      </div>

      {/* Slogan and smaller text*/}
      <div className="">
        <h1 className="my-5 text-4xl font-bold">
          The <span className="text-[#3F51DC] hover:text-purple-400">best</span> resources and
          <br /> activities just for you.
        </h1>
        <h3 className="text-lg leading-6 text-gray-600">
          Make learning enjoyable again with coding
          <br /> exercises, interactive flashcards, whole
          <br /> class games and much more!
        </h3>
      </div>

      {/* buttons */}
      <div className="z-20 mt-12 flex items-center space-x-5 text-xs">
        <Link href={'/login'}><button className="heroButton py-4 px-5">Start your Journey</button></Link>
        <div className="flex items-center space-x-3">
          <Link replace href={'https://csnewbs.com'}>
            <ChevronDoubleRightIcon className="heroButton box-content h-4 w-4 rounded-full py-4 px-4" />
          </Link>

          <p className="font-semibold text-[#3734A9]">
            See our partner website - CSNewbs.com
          </p>
        </div>
      </div>
    </div>

    <div className="z-10 mt-12 -rotate-[14deg]">
      <img src="/questoblue.png" alt="blue questo" className="scale-125" />
      {/* header image */}
    </div>
  </main>
</div>

This is probably really simple but I can't figure out it is so any help is appreciated

htmlcssnext.jsresize


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions