How to handle position absolute elements for all responsive screens?
I have been working in a react project that hase few pages like Home, Services, About, Contact and Career , each page contains a couple of position absolute elements. I used tailwindcss for styling. and started as mobile first , I used Responsive viewer for responsive check while development, I selected 3 devices for this (iphone 14 pro, ipad mini, macbook air) . So i positioned the absolute elements as per the view from these 3 devices. And later I checked in Mobile simulator - responsive testing tool extension for responsiveness I found that the ipad mini I used and position according to is all broken. I style mobile first and then style only for
md: and lg: using these prefix in tailwindcss. So, If I start from mobile first should I style for every screens like sm:,md:,lg: ,xl: and 2xl:? What tool or extension is most used for check responsiveness? What are the common 3 devices you prefer most to check responsiveness? And how to handle position absolute elements?1 Reply
This question is better suited for the #discussions channel as you're not asking about any specific code, but the short answer is that
position: absolute; is the opposite of responsive and its use is bad practice when trying for responsive layout since it's just not.
Feel free to re-post in the right channel if you'd like to further the discussion.