Menu

Post image 1
Post image 2
1 / 2
0

Day 96 of #100DaysOfCode — DevCollab: Responsive Design and End-to-End Testing

DEV Community·M Saad Ahmad·23 days ago
#8fmU9RJo
Reading 0:00
15s threshold

Two days until deployment. Today was the last day of building work, making the app work on mobile, and running every user flow from start to finish to find and fix anything broken before it goes live. Not glamorous work, but necessary work. The things found during testing today would have been embarrassing to discover after deploying. Responsive Design The app was built desktop-first. Every layout decision: two-column grids, side-by-side forms, horizontal navigation, was made with a 1200px viewport in mind. Opening the browser dev tools and switching to a 375px mobile viewport revealed exactly what I expected: broken layouts, overflowing text, buttons too small to tap, and a Navbar that disappeared off the right side of the screen. Tailwind's responsive prefixes make fixing this systematic rather than guesswork. Going page by page and applying sm: , md: , and lg: prefixes to the relevant classes turned the desktop layout into a responsive one.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More