solve alignment issue for small screen

pettiboy · pettiboy · commit 5072ba469f7d · 2021-10-31T10:22:23.000+05:30
diff --git a/index.html b/index.html
@@ -172,8 +172,8 @@
 
           <div class="home-buttons-container">
             <!-- discord community ka button -->
-            <div style="margin-right: 25px; margin-bottom: 30px;">
-              <a class="wow animated fadeInUp blog-link btn-blog" target="_blank" data-wow-delay="1.5s"
+            <div style="margin-bottom: 30px;">
+              <a class="wow animated fadeInUp blog-link btn-blog btn-discord" target="_blank" data-wow-delay="1.5s"
                 href="https://discord.com/invite/UBbSuw7swW">
                 Discord Server
                 <img style="margin-left: 6px; margin-right: 5px;"  class="beta" src="./static/images/discord-logo-white.png"></img>
diff --git a/static/styles/styles.css b/static/styles/styles.css
@@ -814,11 +814,17 @@ only screen and (min-resolution: 2dppx) {
   display: flex; 
   justify-content: center;
 }
+.btn-discord {
+  margin-right: 25px;
+}
 
 @media(max-width: 860px) {
   .home-buttons-container {
     flex-direction: column;
   }
+  .btn-discord {
+    margin-right: 0px;
+  }
 }
 
 .section-header .blog-link {

Original file line number	Diff line number	Diff line change
`@@ -814,11 +814,17 @@ only screen and (min-resolution: 2dppx) {`
`814`	`814`	`display: flex;`
`815`	`815`	`justify-content: center;`
`816`	`816`	`}`
	`817`	`+.btn-discord {`
	`818`	`+ margin-right: 25px;`
	`819`	`+}`
`817`	`820`
`818`	`821`	`@media(max-width: 860px) {`
`819`	`822`	`.home-buttons-container {`
`820`	`823`	`flex-direction: column;`
`821`	`824`	`}`
	`825`	`+ .btn-discord {`
	`826`	`+ margin-right: 0px;`
	`827`	`+ }`
`822`	`828`	`}`
`823`	`829`
`824`	`830`	`.section-header .blog-link {`