Fix CSS

layouts/partials/projects.html

@@ -3,7 +3,7 @@
     <h1 class="text-center">Projects</h1>
 
     <div class="container ml-auto text-center">
-      <div class="btn-group" role="group" id="project-filter-buttons">
+      <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
         <button type="button" class="btn btn-dark" data-filter="all">All</button>
         <button type="button" class="btn btn-dark" data-filter="professional">Professional</button>
         <button type="button" class="btn btn-dark" data-filter="academic">Academic</button>

static/assets/css/projects.css

@@ -28,3 +28,35 @@
 .filtr-projects {
   padding: 15px !important;
 }
+
+/* ============= Device specific fixes ======= */
+
+/* Extra small devices (portrait phones, less than 576px) */
+
+/* No media query for `xs` since this is the default in Bootstrap */
+
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
+}
+
+@media (max-width: 1200px) {
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+  .projects .btn{
+    margin-top: 5px;
+  }
+}

static/assets/css/style.css

@@ -219,4 +219,8 @@ a:hover {
 /* Small devices (landscape phones, 576px and up) */
 
 @media only screen and (max-width: 576px) {
+  .container-fluid.about, .container-fluid.skills, .container-fluid.projects, .container-fluid.recent-posts, .container-fluid.achievements{
+    padding-left: 0px;
+    padding-right: 0px;
+  }
 }