Updating my website I noticed usually all goes well until I get to the XS break point in Blocs. Not only is it often hardest to design for this break point, but I’m not even sure anymore what Blocs XS represents in the real world. Using Solis and Firefox’s Responsive Designer Mode, XS doesn’t really match up well with any conventional smart phone I’m trying to design for. For example: Apple’s iPhone X, XR, XS, 8 or even 5/6 footprints don’t match up with the Blocs XS break point.
For now I tend to do a work around where I use XS as a basic template, but then error correct all designs to make sure they at least fit well into an Apple iPhone X, even while Firefox and Solis don’t exactly replicate that well enough to avoid testing in a dev environment to my actual iPhone X. Ironically none of the other break points in Blocs has thus much margin for error as XS.
If I’m going about this incorrectly, feel free to put me back on the right track. If you know of other tools, apps, techniques etc. that make this more of a science and less of pin the tail on the smart phone, love to hear about those too.