From 1cea684a897582ff25e17a0bade098220e178717 Mon Sep 17 00:00:00 2001
From: Web-serfer <user@example.com>
Date: Tue, 28 Apr 2026 19:37:59 +0500
Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=BE=D0=B2=D1=8B=D0=B5=20=D0=B8=D0=B7?=
 =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=B2=20=D0=BA?=
 =?UTF-8?q?=D0=BE=D0=BC=D0=BF=D0=BE=D0=B5=D0=BD=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/blog/comments/Comments.tsx     |  2 +-
 frontend/src/layouts/ArticleLayout.astro          | 15 +++++++++------
 frontend/src/pages/blog/[slug].astro              | 12 ++++++------
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/blog/comments/Comments.tsx b/frontend/src/components/blog/comments/Comments.tsx
index 36dbe66..6ebc011 100644
--- a/frontend/src/components/blog/comments/Comments.tsx
+++ b/frontend/src/components/blog/comments/Comments.tsx
@@ -270,7 +270,7 @@ export default function Comments(props: CommentsProps) {
     <>
       <style>{`
         @media (max-width: 768px) {
-          .comments-wrapper { padding: 0 0.75rem; }
+          .comments-wrapper { padding: 0; }
           .comments-wrapper h3 { font-size: 1.5rem !important; }
           .comment-card { padding: 1rem !important; }
           .comment-avatar { width: 40px !important; height: 40px !important; }
diff --git a/frontend/src/layouts/ArticleLayout.astro b/frontend/src/layouts/ArticleLayout.astro
index 67440df..e5722f5 100644
--- a/frontend/src/layouts/ArticleLayout.astro
+++ b/frontend/src/layouts/ArticleLayout.astro
@@ -238,16 +238,19 @@ const {
 
   @media (max-width: 768px) {
     .article-hero { height: auto; min-height: 385px; }
-    .article-title { font-size: 1.5rem; }
-    .article-hero-bottom { flex-direction: column; align-items: flex-start; gap: 2rem; }
-    .article-actions { width: 100%; justify-content: flex-start; align-items: flex-end; gap: 1.5rem; }
+    .article-title { font-size: 1.5rem; text-align: center; }
+    .article-hero-top { text-align: center; display: flex; flex-direction: column; align-items: center; }
+    .category-strip { margin-bottom: 1.5rem; padding: 0.4rem 1rem; }
+    .category-text { font-size: 0.7rem; }
+    .article-hero-bottom { flex-direction: column; align-items: center; gap: 2rem; text-align: center; }
+    .article-actions { width: 100%; justify-content: center; align-items: center; gap: 1.5rem; }
     .share-wrapper { display: flex; align-items: flex-end; }
     .article-content-wrapper { padding: 2.5rem 1.5rem; padding-top: 0; }
     .article-hero-inner { padding: 2rem 0; }
     .meta-item { font-size: 0.85rem; }
-    .article-meta { gap: 0.75rem; flex-wrap: wrap; }
-    .category-strip { margin-bottom: 1.5rem; padding: 0.4rem 1rem; }
-    .category-text { font-size: 0.7rem; }
+    .article-meta { gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
+    .article-content-wrapper .post-content h2 { font-size: 1.25rem; text-align: center; justify-content: center; }
+    .article-content-wrapper .post-content h3 { font-size: 1.1rem; text-align: center; justify-content: center; }
   }
 </style>
 
diff --git a/frontend/src/pages/blog/[slug].astro b/frontend/src/pages/blog/[slug].astro
index 4defca8..a194b0f 100644
--- a/frontend/src/pages/blog/[slug].astro
+++ b/frontend/src/pages/blog/[slug].astro
@@ -152,16 +152,16 @@ const heroImage = getPostImageUrl(post);
   }
 
   @media (max-width: 768px) {
-    .post-content {
-      padding: 2rem 0;
-    }
-
     .post-content :global(h2) {
-      font-size: 1.15rem;
+      font-size: 1rem;
+      text-align: center;
+      justify-content: center;
     }
 
     .post-content :global(h3) {
-      font-size: 1.05rem;
+      font-size: 0.9rem;
+      text-align: center;
+      justify-content: center;
     }
 
     .post-content :global(p) {