web part: mobile design Sharepoint SPFX react / typecript

So I created a Sharepoint SPFx React Typescript app that works perfectly.

Using this guide here, I design a mobile version of the web part app: https://goshakkk.name/different-mobile-desktop-tablet-layouts-react/

I was using the developer tools in Google Chrome to view the site on a mobile device (screen size less than 760 px).

However, when I load the Sharepoint page on my mobile phone, it shows the desktop version. It appears that when I view the SharePoint site in my mobile browser or the SharePoint application it is loading the full desktop version of the site. When i change const isMobile = width <= 1200; at 1200 it shows the mobile version, but everything is dimensioned for desktop.

Is this because I turned off mobile browser view : https://gauravmahajan.net/2016/07/15/sharepoint-turn-off-mobile-view/

I turned it off because I was redirecting the site to a touch app link that was not working.

How do I get my sharepoint site to open on the mobile side on a mobile phone?