I’ve been working on some UI slicing recently and just realized that the frame in my UI design is set to 1920×1080, while my monitor’s resolution is 1366×768. I also just discovered that I can use Chrome’s developer tools to adjust the dimensions of my project.
My question is: Is there a way to make the design responsive for my resolution using TailwindCSS, while still supporting 1920×1080 or even larger screens? I understand that not everyone uses the same screen dimensions.
I’ve tried playing with the media queries on Tailwind something like
<main className="max-w-8xl mx-auto h-[80px]">
<nav className="2xl:bg-black ml-[158px] mr-[163px] md:mb-[23px] mt-[29px]">
<div className="flex text-[16px] font-poppins items-center justify-between gap-[42px]">
<Image src={Logo} className="mr-auto" alt="Logo"></Image>
<Link href="/" >Home</Link>
<Link href="/about" >About</Link>
<Link href="/services" >Services</Link>
<Link className="ml-auto border border-[#FE0000] bg-[#FE0000] text-[14px] text-white font-bold px-10 py-3 rounded-[81px] hover:bg-white hover:text-[#FE0000] transition-all duration-300 ease-in-out hover:border]" href="/contact-us" >Contact Us</Link>
</div>
</nav>
</main>I’m a bit confused about how to approach this correctly. I know I should be starting with the mobile view and then moving on to larger dimensions, but due to the dimensions I’m working with and my monitor’s resolution, I’m feeling a bit lost right now.