pojem css

nuxt/components/Pojem.vue

@@ -36,7 +36,9 @@ const urediPojem = async () => {
       <div class="tekst" v-html="pojem.tekst" />
     </div>
     <PojemForm v-if="urejanje" :revisionId="revisionId" :pojem="pojem" :urejanje="urejanje" />
-    <div v-if="!urejanje" class="gumb" @click="urediPojem">Uredi</div>
+    <div>
+      <div v-if="!urejanje" class="gumb" @click="urediPojem">Uredi</div>
+    </div>
   </section>
 </template>
 
@@ -45,17 +47,45 @@ const urediPojem = async () => {
     position: relative;
     background: var(--bela);
     margin: 2rem;
-    border-radius: 3rem;
+    border-radius: 24px;
     padding: 2rem;
+    display: flex;
+    flex-wrap: wrap;
+    box-sizing: border-box;
   }
-  @media screen and (min-width: 768px) {
+
+  .pojem > div {
+    position: relative;
+    width: 50%;
+  }
+
+  h2 {
+    text-transform: uppercase;
+    margin-top: 0;
+  }
+  .gumb {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    text-decoration: underline;
+    font-size: 3rem;
+  }
+
+  @media screen and (max-width: 768px) {
     PojemForm {
       width: 50%;
       float: left;
     }
+    .pojem > div {
+      min-height: 4rem;
+      width: 100%;
+    }
   }
-  .gumb {
+  @media screen and (max-width: 325px) {
-    float: right;
+    .pojem {
-    margin-right: 1rem;
+      margin-right: 0;
+      margin-left: 0;
+    }
   }
+
 </style>