What is the best way to tackle responsive design with minimal redundant code ?

anuraganand profile image anurag-anand ・1 min read

I work at a startup with a team of 6 people, We work primarily on MERN stack. I handle the UI /UX part but we have a hard time making sites completely responsive, it even looks different on the laptops of our fellow devs while production. We are using responsively to check on different screen sizes. Is there some tricks or best practices there for it to make my life easier? a resource or some guidance about how to tackle responsiveness like a pro. We use flexbox,bootstrap but converting the UI screens to actual code never goes smoothly. ultimately we have to put media query breakpoints writing multiple css to get the job done which I personally hate but sometimes that becomes the only resort.
Please tell me how can I and My team become more competent . Thanks


markdown guide

Can you use 3rd party Libraries ? We develop mobile apps in react native and there is a package for handling responsiveness ...Quite Handy !... You can check out this package React Responsive ... Might be helpful.


okay thanks..I will take a look


I usually dont rely on css frameworks. Flex box and media queries usually handle stuff pretty well. To conditionally render elements of different device size u can use react-device-detect or react-responsive. Also keep max width of website below 1200px if possible. So u dun have to worry about large displays


I'm no expert but I have been studying inconsistencies across browsers. Do you guys normailze your css so it's consistent across all browsers?


Switch to Grid only. Use Scss in root. Get rid of 3rd party css except perhaps material.