New template has a media query issue that needs to be addressed

Hey, I just noticed something that may explain a lot of the mobile display issues I have been seeing. This issue seems to happen when you are log in.

It looks like the template doesn’t specifically account for smaller devices in roughly the 320px–470px range. That’s an important screen-size range for phones, and leaving it out can cause elements to scale or position incorrectly which is exactly whats happening.

That's why when we look at our iphones some of the elements are way off like in my example image. Seems to be Happening on a lot of pages

I also noticed that the mobile layout relies pretty heavily on Flexbox and padding. Flexbox itself is fine on mobile, but when it’s applied too broadly—especially along with fixed or excessive padding—it can cause elements to shrink, stretch, wrap, or become misaligned on smaller screens which is also happening.

I think it would be worth adding a dedicated breakpoint for smaller phones and reviewing where Flexbox and padding are actually needed. That should help clean up a lot of the distorted spacing and alignment we’re currently seeing on mobile.

Just wanted to point this out because I think the template should work for all devices instead of select sizes. Especially on an Iphone...

****Remember guys double check your work on all devices before going live. ****