diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
index f2efbfcd2..33b893001 100644
--- a/resource/css/skosmos.css
+++ b/resource/css/skosmos.css
@@ -1315,18 +1315,43 @@ h2#vocab-heading {
   margin-right: 0.25em;
 }
 
-@media (max-width: 992px) {
+#concept-mappings .prop-mapping-label,
+#concept-mappings .prop-mapping-vocab {
+  overflow-wrap: break-word;
+}
+
+@media (max-width: 992px) { /* lg breakpoint */
   .property {
     border-top: 1px solid var(--main-content-border);
     padding-top: .5rem;
   }
+
   .property-label,
   .property-value {
     padding-top: 0;
   }
+
   .property-value::before {
     display: none;
   }
+
+  #concept-mappings .property:first-child {
+    border-top: none;
+    padding-top: 0;
+  }
+}
+
+/* --- Mobile specific rules --- */
+
+@media (max-width: 768px) { /* md breakpoint */
+  .main-content-section {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  #concept-mappings .prop-mapping:last-child .row:last-child { /* Last mapping */
+    margin-bottom: 0 !important;
+  }
 }
 
 /* --- Vocab statistics --- */
diff --git a/resource/js/concept-mappings.js b/resource/js/concept-mappings.js
index cdbc0d4b1..04fe22e1d 100644
--- a/resource/js/concept-mappings.js
+++ b/resource/js/concept-mappings.js
@@ -110,12 +110,12 @@ conceptMappingsApp.component('concept-mappings', {
       </div>
       <div class="col-lg-8 gx-0 gx-lg-4 property-value">
         <div class="row mb-2" v-for="m in mapping">
-          <div class="col-5 prop-mapping-label">
+          <div class="col-sm-5 prop-mapping-label">
             <span v-if="m.notation" class="prop-mapping-notation">{{ m.notation }}</span>
             <a :href="m.hrefLink">{{ m.prefLabel }}</a>
             <span v-if="m.lang && m.lang !== this.content_lang"> ({{ m.lang }})</span>
           </div>
-          <div class="col-7 prop-mapping-vocab">{{ m.vocabName }}</div>
+          <div class="col-sm-7 prop-mapping-vocab">{{ m.vocabName }}</div>
         </div>
       </div>
     </div>