updating css for smaller screens

themes/nipponalba/static/css/style.css

@@ -1125,8 +1125,16 @@ mastodon-comments {
   --comment-indent: 40px;
   --width: 90%;
 }
+
 mastodon-comments a{
   color: var(--bg-colour);
+}}
+
+mastodon-comments .author .details .name img{
+  width: 20px;
+  height: 20px;
+  display:inline-block;
+  vertical-align:middle;
 }
 .index_exercise{
   width: 95%;
@@ -1229,6 +1237,11 @@ mastodon-comments a{
   main {
     width:95%;
   }
+  mastodon-comments {
+  --comment-indent: 10px;
+  --width: 80%;
+}
+
 #interactions{
   padding-bottom: 100px;
 }
@@ -1341,7 +1354,9 @@ article img{
   max-width: 95%;
 
 }
-
+  mastodon-comments {
+  --width: 80%;
+}
 }
 
 @media screen and (max-width: 460px) {
@@ -1384,6 +1399,8 @@ nav{
 #interactions{
   padding-bottom:10px;
   width:95%;
+  max-width:95%;
+  display:block;
 }
 #Bookmarks, #ブックマーク, .language{
 display: none;
@@ -1397,6 +1414,30 @@ display: none;
   padding: 0;
   width: 300px;
 }
+.mastodon-comment{
+  padding-left:0;
+  width:95%;
+}
+.mastodon-comment .author .date{
+  display:none;
+  vertical-align:bottom;
+}
+#mastodon-comments-list {
+  width: 100%;
+  comment-indent:0px;
+  margin-left:0;
+}
+mastodon-comments .author .avatar img{
+  width:50px;
+}
+mastodon-comments .author .details .user{
+  font-size:10px;
+}
+mastodon-comments .author .name img{
+  width:20px;
+  display:inline-block;
+  vertical-align:middle;
+}
 
 }
 @media screen and (max-width: 360px) {