lets see if this fixes the view port

src/android/.idea/misc.xml

@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ExternalStorageConfigurationManager" enabled="true" />
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_17" default="true" project-jdk-name="jbr-17" project-jdk-type="JavaSDK" />
-</project>

src/android/app/src/main/java/walljm/dynamicbible/MainActivity.java

@@ -2,4 +2,23 @@ package walljm.dynamicbible;
 
 import com.getcapacitor.BridgeActivity;
 
-public class MainActivity extends BridgeActivity {}
+import android.os.Bundle;
+import android.webkit.WebSettings;
+import android.webkit.WebView;
+
+public class MainActivity extends BridgeActivity {
+
+  @Override
+  public void onCreate(Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+
+    // Grab WebView
+    WebView webView = (WebView) findViewById(R.id.webview);
+    WebView.setWebContentsDebuggingEnabled(true);
+
+    // The Magic
+    WebSettings webSettings = webView.getSettings();
+    webSettings.setUseWideViewPort(true);
+
+  }
+}

src/android/app/src/main/res/layout/activity_main.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.coordinatorlayout.widget.CoordinatorLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
@@ -7,6 +8,7 @@
     tools:context=".MainActivity">
 
     <WebView
+        android:id="@+id/webview"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />
 </androidx.coordinatorlayout.widget.CoordinatorLayout>

src/src/index.html

@@ -5,7 +5,14 @@
     <title>Dynamic Bible</title>
     <meta
       name="viewport"
-      content="viewport-fit=cover, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
+      content="
+        width=device-width,
+        height=device-height,
+        initial-scale=1.0,
+        minimum-scale=1.0,
+        maximum-scale=1.0,
+        user-scalable=no
+      "
     />
     <meta name="format-detection" content="telephone=no" />
     <meta name="msapplication-tap-highlight" content="no" />

src/src/styles/app.scss

@@ -25,8 +25,9 @@ html {
   --page-color-primary: rgb(46, 42, 54);
   --page-color-accent: rgb(111, 109, 116);
 
-  --mat-toolbar-title-text-size: 16pt;
-  --mdc-list-list-item-label-text-size: 14pt;
+  --mat-toolbar-title-text-size: 16pt !important;
+  --mdc-list-list-item-label-text-size: 14pt !important;
+  --mdc-icon-button-icon-size: 15pt !important;
 }
 
 body {
@@ -52,9 +53,9 @@ mat-icon {
 }
 
 .card-title {
-  font-size: 1.5rem;
+  font-size: 1.2rem;
   font-family: "Roboto Condensed";
-  color: var(--card-title);
+  color: var(--card-title) !important;
   padding: 1rem;
   border-top-left-radius: var(--card-border-radius);
   border-top-right-radius: var(--card-border-radius);

src/src/styles/fonts.scss

@@ -11,8 +11,6 @@
   font-family: "Material Icons";
   font-weight: normal;
   font-style: normal;
-  font-size: 24px;
-  line-height: 1;
   letter-spacing: normal;
   text-transform: none;
   display: inline-block;