diff --git a/vue/src/apps/ShoppingListView/ShoppingListView.vue b/vue/src/apps/ShoppingListView/ShoppingListView.vue
index 6541dba72..fd5c458b9 100644
--- a/vue/src/apps/ShoppingListView/ShoppingListView.vue
+++ b/vue/src/apps/ShoppingListView/ShoppingListView.vue
@@ -400,10 +400,11 @@
 
         <bottom-navigation-bar active-view="view_shopping">
             <template #custom_nav_content v-if="current_tab <= 1">
-                <div class="d-flex flex-row justify-content-around mb-3">
+                <b-row class="pr-1 pl-1 mb-3">
+                    <b-col cols="12">
+                          <template v-if="current_tab===0">
 
 
-                    <template v-if="current_tab===0">
                         <b-input-group>
                             <b-form-input v-model="new_item.ingredient" :placeholder="$t('Food')"
                                           @keyup.enter="addItem"></b-form-input>
@@ -422,8 +423,9 @@
                         ></generic-multiselect>
                     </template>
 
+                    </b-col>
+                </b-row>
 
-                </div>
             </template>
 
             <template #custom_create_functions>
diff --git a/vue/src/components/ShoppingLineItem.vue b/vue/src/components/ShoppingLineItem.vue
index a5560f6a9..911b1a3ec 100644
--- a/vue/src/components/ShoppingLineItem.vue
+++ b/vue/src/components/ShoppingLineItem.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="shopping_line_item" class="swipe-container" @touchend="handleSwipe()"
+    <div class="swipe-container" :id="item_container_id" @touchend="handleSwipe()"
          v-if="(useUserPreferenceStore().device_settings.shopping_show_checked_entries || !is_checked) && (useUserPreferenceStore().device_settings.shopping_show_delayed_entries || !is_delayed)"
     >
         <div class="swipe-action" :class="{'bg-success': !is_checked , 'bg-warning': is_checked }">
@@ -141,6 +141,13 @@ export default {
         }
     },
     computed: {
+        item_container_id: function () {
+            let id = 'id_sli_'
+            for (let i in this.entries) {
+                id += i + '_'
+            }
+            return id
+        },
         is_checked: function () {
             for (let i in this.entries) {
                 if (!this.entries[i].checked) {
@@ -272,7 +279,7 @@ export default {
          */
         handleSwipe: function () {
             const minDistance = 80;
-            const container = document.querySelector('.swipe-container');
+            const container = document.querySelector('#' + this.item_container_id);
             // get the distance the user swiped
             const swipeDistance = container.scrollLeft - container.clientWidth;
             if (swipeDistance < minDistance * -1) {