One important thing to consider when building web apps is making sure all the pages are responsive. A web app is responsive when its UI fits well on all types of device screen sizes. In this article, I’ll walk you through how I made the UI of all the pages I’ve created so far responsive. Let’s dive in🏄🏾.
How I made the pages responsive🧑🏾💻
When making pages responsive we use what are called breakpoints. Breakpoints in CSS are points that define where different screen sizes start and end. The most common CSS breakpoints are min-width: 640px, min-width: 768px, min-width: 992px and min-width: 1200px. For Whinst I’m using TailwindCSS for all my styles. Tailwind uses a mobile-first breakpoint system meaning that styles that have not been defined with a specific breakpoint will take effect on all screens starting with mobile, while those defined will only take effect on specific screens.
The way these breakpoints are defined in TailwindCSS is a little different from regular CSS. I had to define each style individually for the breakpoint to take effect.
<div className="border-2 w-36 h-36 m-2 md:h-48 md:w-48">
</div>
As seen from the code above taken from the project I had to individually define the height (md:h-48) and width (md:w-48) for them to take effect on medium screens. When defined together it did not work🙄. I applied the same principle on all the pages since all of them roughly contain the same structure which is simply images arranged in a grid, it was just a matter of sizing them to fit a respective device.
Now that the web app is responsive I’ve since moved on to more challenging tasks such as responsive images and adding some app functionality. Thanks for reading and see you in the next one🙏.