diff --git a/src/components/ReadingProgressIndicator.tsx b/src/components/ReadingProgressIndicator.tsx
index 2e46efa2..ac50e7e3 100644
--- a/src/components/ReadingProgressIndicator.tsx
+++ b/src/components/ReadingProgressIndicator.tsx
@@ -19,7 +19,7 @@ export const ReadingProgressIndicator: React.FC<ReadingProgressIndicatorProps> =
 }) => {
   const clampedProgress = Math.min(100, Math.max(0, progress))
   
-  // Calculate left and right offsets based on sidebar states
+  // Calculate left and right offsets based on sidebar states (desktop only)
   const leftOffset = isSidebarCollapsed 
     ? 'var(--sidebar-collapsed-width)' 
     : 'var(--sidebar-width)'
@@ -29,11 +29,11 @@ export const ReadingProgressIndicator: React.FC<ReadingProgressIndicatorProps> =
   
   return (
     <div 
-      className={`fixed bottom-0 z-[1102] bg-[rgba(26,26,26,0.85)] backdrop-blur-sm px-3 py-1 flex items-center gap-2 transition-all duration-300 md:block hidden ${className}`}
+      className={`reading-progress-bar fixed bottom-0 left-0 right-0 z-[1102] bg-[rgba(26,26,26,0.85)] backdrop-blur-sm px-3 py-1 flex items-center gap-2 transition-all duration-300 ${className}`}
       style={{
-        left: leftOffset,
-        right: rightOffset
-      }}
+        '--left-offset': leftOffset,
+        '--right-offset': rightOffset
+      } as React.CSSProperties}
     >
       <div className="flex-1 h-0.5 bg-white/10 rounded-full overflow-hidden relative">
         <div 
diff --git a/src/styles/utils/animations.css b/src/styles/utils/animations.css
index 5149c5c3..c88e4818 100644
--- a/src/styles/utils/animations.css
+++ b/src/styles/utils/animations.css
@@ -21,4 +21,12 @@
   75% { box-shadow: 0 0 20px rgba(var(--highlight-rgb, 255, 255, 0), 0.6); transform: scale(1.02); }
 }
 
+/* Reading progress bar positioning */
+@media (min-width: 769px) {
+  .reading-progress-bar {
+    left: var(--left-offset) !important;
+    right: var(--right-offset) !important;
+  }
+}
+