diff --git a/public/css/grocy.css b/public/css/grocy.css
index a5936971..c8d0ddca 100644
--- a/public/css/grocy.css
+++ b/public/css/grocy.css
@@ -60,13 +60,6 @@ a.discrete-link:focus {
 	background-color: #ffffff;
 }
 
-.fullscreen-card .fullscreen-no-gutters {
-	 margin-left: 0 !important;
-	 margin-right: 0 !important;
-	 padding-left: 0 !important;
-	 padding-right: 0 !important;
-}
-
  /* Fixes smooth scrolling on iOS */
 #sidebarResponsive,
 .fullscreen {
diff --git a/public/viewjs/shoppinglist.js b/public/viewjs/shoppinglist.js
index 7a4e73da..07a97d71 100644
--- a/public/viewjs/shoppinglist.js
+++ b/public/viewjs/shoppinglist.js
@@ -359,6 +359,10 @@ $(".switch-view-mode-button").on('click', function(e)
 	e.preventDefault();
 
 	$("#shoppinglist-main").toggleClass("fullscreen");
+	$("#shoppinglist-main").toggleClass("px-0 mx-0");
+	$("#shoppinglist-main").children(":first").toggleClass("px-0 mx-0");
+	$(".dataTables_scrollHeadInner").width(""); // Remove absolute width on element set by DataTables
+	$(".dataTables_scrollHeadInner table").width(""); // Remove absolute width on element set by DataTables
 	$("body").toggleClass("fullscreen-card");
 	$("#shopping-list-normal-view-button").toggleClass("d-none");
 	$("#mainNav").toggleClass("d-none");
diff --git a/views/shoppinglist.blade.php b/views/shoppinglist.blade.php
index 2bf10713..ac1994d0 100644
--- a/views/shoppinglist.blade.php
+++ b/views/shoppinglist.blade.php
@@ -93,8 +93,8 @@
 	</div>
 </div>
 
-<div id="shoppinglist-main" class="row d-print-none fullscreen-no-gutters">
-	<div class="col-xs-12 col-md-8 pb-3 fullscreen-no-gutters">
+<div id="shoppinglist-main" class="row d-print-none">
+	<div class="col-xs-12 col-md-8 pb-3">
 		<a id="shopping-list-normal-view-button" class="btn btn-outline-dark btn-block switch-view-mode-button d-none" href="#">
 			<i class="fas fa-expand-arrows-alt"></i> {{ $__t('Normal view') }}
 		</a>
@@ -161,7 +161,7 @@
 		@include('components.calendarcard')
 	</div>
 
-	<div class="col-xs-12 col-md-8 d-print-none px-0 pt-2">
+	<div class="col-xs-12 col-md-8 d-print-none pt-2">
 		<div class="form-group">
 			<label class="text-larger font-weight-bold" for="notes">{{ $__t('Notes') }}</label>
 			<a id="save-description-button" class="btn btn-success btn-sm ml-1 mb-2" href="#">{{ $__t('Save') }}</a>