full refactoring + improve responsive

src/components/Settings.vue

@@ -1,8 +1,8 @@
 <template>
 <div id="settings-container">
-  <div id="color-palette">
+  <div id="color-palette" class="bubble-container">
     <div v-for="color in colors" :key="color.id">
-      <div class="color-palette-item" :style="{backgroundColor: color, borderColor: activeColor}" @click="setBackgroundColor($event, color)"></div>
+      <div class="bubble-item" :style="{backgroundColor: color, borderColor: activeColor}" @click="setBackgroundColor($event, color)"></div>
     </div>
   </div>
 </div>
@@ -21,7 +21,7 @@ export default {
         grey: "#d4d4e8",
         salmon: "#E6CEBD"
       },
-      activeColor: "#504746"
+      activeColor: "#504746",
     }
   },
   methods: {
@@ -32,14 +32,14 @@ export default {
       this.$store.commit("setColorSelected", color);
     },
     removeActiveColorFromPalette() {
-      const palette = document.querySelectorAll(".color-palette-item");
+      const palette = document.querySelectorAll(".bubble-item");
       for (let i = 0; i < palette.length; i++) {
         palette[i].style.borderColor = "lightslategrey";
       }
     },
     setFirstColor() {
       // get first div of color-palette
-      const palette = document.querySelectorAll(".color-palette-item");
+      const palette = document.querySelectorAll(".bubble-item");
       palette[0].style.borderColor = this.activeColor;
     }
   },
@@ -52,7 +52,7 @@ export default {
 
 <style scoped>
 
-#color-palette {
+.bubble-container {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -60,7 +60,7 @@ export default {
   margin-bottom: 8px;
 }
 
-.color-palette-item {
+.bubble-item {
   margin-top: 4px;
   width: 24px;
   height: 24px;
@@ -69,12 +69,17 @@ export default {
   border: solid 2px lightslategrey;
 }
 
-@media (max-width: 675px) {
+/* ********** */
+/* RESPONSIVE */
+/* ********** */
+
+@media (max-width: 835px) {
   #color-palette {
     flex-direction: row;
     justify-content: center;
+    margin-top: 8px;
   }
-  .color-palette-item {
+  .bubble-item {
     margin-top: 0;
     margin-right: 4px;
   }