diff --git a/CHANGELOG.md b/CHANGELOG.md
index f39ee4145b3032b96b689d2fed5ac2066b5ac578..8f542c6d8b791341bc0ff27fcfa37d40ffbc19d6 100755
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,9 @@
 - layerTree: Adds a new parameter in portalconfig.tree to decide whether the scale is displayed in the layer tooltip in addition to the name of the corresponding layer
 - print: possibility to edit the output file name in print mode 'plotservice'.
 - wfsSearch: config parameter 'responseProjection' to make it possible to convert the projection of the coordinates in the requested service response.
+- Bootstrap grid-breakpoints are now configurable in `variables.scss`. For switching between mobile and desktop the grid-breakpoint `md` is used.
+- The attribute `onlyDesktop` can now be used to display tools mobile by setting it to `false` for a tool.
+- Filter: New parameter 'searchInMapExtentPreselected' was added. It will preselect the checkbox searchInMapExtent if configured.
 
 ### Changed
 - fileImport: If the features of the imported file are removed from MP, the imported file name will be removed from the "Successfully imported" list
diff --git a/bitbucket-pipelines.yml b/bitbucket-pipelines.yml
index 19e8152febab47b3674502dbf1ecaab2e44c2a12..55d7d86bcf85651dac0f432d39170726377f07e3 100644
--- a/bitbucket-pipelines.yml
+++ b/bitbucket-pipelines.yml
@@ -91,6 +91,7 @@ pipelines:
                 name: deploy on openCode
                 script:
                     - git push https://$OpenCode_User:$OpenCode_Password@gitlab.opencode.de/geowerkstatt-hamburg/masterportal.git $BITBUCKET_TAG
+                    - git push https://$OpenCode_User:$OpenCode_Password@gitlab.opencode.de/geowerkstatt-hamburg/masterportal.git dev -f
     custom: # Pipelines that are triggered manually
         End2End-Tests on saucelabs:
             - step: *install-e2e-tests-server-on-test-geoportal
diff --git a/css/variables.scss b/css/variables.scss
index d95aa70f85b0ea0240f5a69533e1027c5eca8e2e..976583d0c72b106c9c562552349e1dbb5ca53ebf 100644
--- a/css/variables.scss
+++ b/css/variables.scss
@@ -207,3 +207,37 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
 
 @import "../node_modules/bootstrap/scss/maps";
 @import "../node_modules/bootstrap/scss/mixins";
+
+
+/*
+ * Grid breakpoints
+ *
+ * Define the minimum dimensions at which your layout will change,
+ * adapting to different screen sizes, for use in media queries.
+ */
+ $xs: 0;
+ $sm: 576px;
+ $md: 768px;
+ $lg: 992px;
+ $xl: 1200px;
+ $xxl: 1400px;
+
+$grid-breakpoints: (
+  xs: $xs,
+  sm: $sm,
+  md: $md,
+  lg: $lg,
+  xl: $xl,
+  xxl: $xxl
+);
+
+:export {
+    gridBreakpoints: {
+        xs: $xs;
+        sm: $sm;
+        md: $md;
+        lg: $lg;
+        xl: $xl;
+        xxl: $xxl;
+    }
+}
diff --git a/doc/config.json.de.md b/doc/config.json.de.md
index 3673677fac849848e4bedca774dd3f59acc5d067..f532464cdbc118bd03b89af3e0f455b7a28fe559 100644
--- a/doc/config.json.de.md
+++ b/doc/config.json.de.md
@@ -1718,6 +1718,7 @@ Die Konfiguration eines Layers.
 |searchInMapExtent|nein|Boolean|false|Wenn auf `true` eingestellt, wird automatisch eine generische Checkbox erzeugt, mit der die Filterung auf den Browser-Extent beschränkt werden kann. Ist die Checkbox angehakt, ist das automatische Zoomen ausgeschaltet. Bitte unbedingt [loadingStrategy](#markdown-header-themenconfiglayervector) auf `all` setzen, da es sonst zu ungewollten Effekten kommt, wenn nach dem Filtern herausgezoomt wird.|false|
 |searchInMapExtentInfo|nein|Boolean|true|Rechts von der Checkbox wird ein Info-Symbol angezeigt, bei Klick wird eine Standard-Beschreibung eingeblendet. Auf `false` stellen, wenn es nicht angezeigt werden soll. Kann auch als String mit einem eigenen Info-Text eingestellt werden oder als Ãœbersetzungs-Key.|false|
 |searchInMapExtentProactive|nein|Boolean|true|Die Checkbox zum Filtern im Browser-Extent löst unter `strategy`: `active` eine direkte Filterung im aktuellen Browser-Extent aus. Dies kann durch Einstellen von `searchInMapExtentProactive`: `false` abgeschaltet werden.|false|
+|searchInMapExtentPreselected|nein|Boolean|false|Die Checkbox zum Filtern im Browser-Extent ist initial ausgewählt wenn `searchInMapExtentPreselected`: `true` eingestellt ist.|false|
 |showHits|nein|Boolean|true|Die Treffer nach einer Filterung werden als Text angezeigt. Auf `false` stellen, um die Treffer nicht anzuzeigen.|false|
 |clearAll|nein|Boolean|false|Beim Klick auf den Zurücksetzen-Button werden alle Features angezeigt. Wird das clearAll-Flag auf `true` gestellt, werden beim Zurücksetzen keine Features angezeigt.|false|
 |wmsRefId|nein|String/String[]|""|Wenn der Layer gefiltert wird, wird der WMS-Layer mit der wmsRefId unsichtbar und im Themenbaum deaktiviert. Stattdessen wird der WFS aus der Filter-Konfiguration angezeigt. Nach dem Zurücksetzen des Filters wird die WMS-Ebene wieder aktiviert und wieder sichtbar.|false|
diff --git a/doc/config.json.md b/doc/config.json.md
index 34f393d5bcfa0e3b68694657561ed0b23c90a215..f73db78d9551915a53b35c2598ac1c1c77a777ff 100644
--- a/doc/config.json.md
+++ b/doc/config.json.md
@@ -1783,6 +1783,7 @@ An object to define a layer to filter with.
 |searchInMapExtent|no|Boolean|false|Set to `true` to activate a generic checkbox, where you can set the filtering to `only filter in current browser extent`. If the extent checkbox is checked, automatic zooming is disabled. Make sure to set [loadingStrategy](#markdown-header-themenconfiglayervector) to `all` to avoid weird effects when zooming out after filtering in extent.|false|
 |searchInMapExtentInfo|no|Boolean|true|A little icon is shown right hand side of the checkbox. Clicking the icon, a standard description is shown. Set to `false` to disable this feature. Set to a individual text to use an own description or use a translation key.|false|
 |searchInMapExtentProactive|no|Boolean|true|The checkbox for filtering in the browser extent triggers direct filtering in the current browser extent under `strategy`: `active`. This can be disabled by setting `searchInMapExtentProactive`: `false`.|false|
+|searchInMapExtentPreselected|nein|Boolean|false|The checkbox for filtering in the browser extent is initially selected if `searchInMapExtentPreselected`: `true` is set.|false|
 |showHits|no|Boolean|true|After filtering, the hits are displayed. Set to `false` to not show the hits.|false|
 |clearAll|no|Boolean|false|After clicking button Reset all, all the features will be shown. Set to `true` to clear all the features after clicking Reselt all button.|false|
 |wmsRefId|no|String/String[]|""|If the layer is filtered, the WMS layer with `wmsRefId` will be invisible and deactivated from Tree. After resetting the layer, the WMS layer will be activated and visible again.|false|
diff --git a/modules/core/configLoader/parser.js b/modules/core/configLoader/parser.js
index 05b3a58b26120522ced64daeee035b7709dd2796..947858a2cf74ea3a8c62d278c3776f23909048ff 100644
--- a/modules/core/configLoader/parser.js
+++ b/modules/core/configLoader/parser.js
@@ -207,9 +207,9 @@ const Parser = Backbone.Model.extend(/** @lends Parser.prototype */{
             else {
                 toolitem = Object.assign(value, {type: "tool", parentId: parentId, id: key});
 
-                // wenn tool noch kein "onlyDesktop" aus der Config bekommen hat
-                if (!toolitem?.onlyDesktop) {
-                    // wenn tool in onlyDesktopTools enthalten ist, setze onlyDesktop auf true
+                // if tool did not get "onlyDesktop" from the config yet
+                if (typeof toolitem?.onlyDesktop === "undefined") {
+                    // if tool is included in onlyDesktopTools, set onlyDesktop to true
                     if (this.get("onlyDesktopTools").indexOf(toolitem.id) !== -1) {
                         toolitem = Object.assign(toolitem, {onlyDesktop: true});
                     }
diff --git a/modules/core/util.js b/modules/core/util.js
index e2780a86608d872d64aa56d01ea5c351dec9abc5..eee78b799657ec33349520b0f2a1b1023c45fee8 100644
--- a/modules/core/util.js
+++ b/modules/core/util.js
@@ -1,6 +1,7 @@
 import uniqueId from "../../src/utils/uniqueId";
 import LoaderOverlay from "../../src/utils/loaderOverlay";
 import findWhereJs from "../../src/utils/findWhereJs";
+import isMobile from "../../src/utils/isMobile";
 
 const Util = Backbone.Model.extend(/** @lends Util.prototype */{
     defaults: {
@@ -544,7 +545,7 @@ const Util = Backbone.Model.extend(/** @lends Util.prototype */{
      * @return {void}
      */
     toggleIsViewMobile: function () {
-        if (window.innerWidth >= 768) {
+        if (!isMobile()) {
             this.setIsViewMobile(false);
         }
         else {
diff --git a/modules/language/style.scss b/modules/language/style.scss
index 50d136884745fd4c3e515b22ec18c678256bc312..1c610e5f234b52893d6d670c2e7dbdb2052e1327 100644
--- a/modules/language/style.scss
+++ b/modules/language/style.scss
@@ -56,7 +56,7 @@
     z-index: 2000;
 }
 
-@media (max-width: 767px) {
+@include media-breakpoint-down(md) {
     #languagebar {
         .currentLan {
             text-align: right;
@@ -67,4 +67,4 @@
             right: 0;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/modules/menu/style.scss b/modules/menu/style.scss
index 3386d274c14e17ba2d6205f0545a2266c6a0ff4f..e78cba78f44ad9eb0c23fd39f9b16b9e0e2ae1c1 100644
--- a/modules/menu/style.scss
+++ b/modules/menu/style.scss
@@ -44,17 +44,17 @@
         z-index: 999;
         width: 100%;
         max-height: 66vh;
-        left: 0; 
+        left: 0;
     }
 }
-@media (min-width: 768px) {
+@include media-breakpoint-up(md) {
     .navbar {
         .container-fluid {
             padding-left: 0;
         }
     }
 }
-@media (max-width: 767px) {
+@include media-breakpoint-down(md) {
     .navbar {
         .container-fluid {
             padding-left: 0;
@@ -67,4 +67,4 @@
             z-index: 1000;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/modules/searchbar/style.scss b/modules/searchbar/style.scss
index ed5a89749b6413560b1e91d02576f53ec775328e..bf16b2924792ce6fd6136c22a406573c4f81fe15 100644
--- a/modules/searchbar/style.scss
+++ b/modules/searchbar/style.scss
@@ -173,13 +173,13 @@ li.results {
             color: $white;
         }
     }
-    .line-break { 
+    .line-break {
         white-space: normal;
         overflow-wrap: break-word;
         word-wrap: break-word;
         word-break: break-word;
         hyphens: auto;
-    } 
+    }
 
     .list-group-item {
 
@@ -375,7 +375,7 @@ input#searchInput.form-control {
         box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
     }
 }
-@media (max-width: 767px) {
+@include media-breakpoint-down(md) {
     #searchbar {
         margin-top: 8px;
         margin-bottom: 8px;
@@ -398,7 +398,7 @@ input#searchInput.form-control {
         min-width: 200px;
     }
 }
-@media (min-width: 768px) {
+@include media-breakpoint-up(md) {
     #searchbar {
         position: absolute;
         right: 0;
diff --git a/modules/searchbar/view.js b/modules/searchbar/view.js
index 17847d4d8399dcc6fbbceb9bea5017f4998c1b44..e96b097ecb08ecd855bb7d5663ec4e334f8cd8c0 100644
--- a/modules/searchbar/view.js
+++ b/modules/searchbar/view.js
@@ -17,6 +17,7 @@ import "./RadioBridge.js";
 import store from "../../src/app-store/index";
 import {getWKTGeom} from "../../src/utils/getWKTGeom";
 import Collapse from "bootstrap/js/dist/collapse";
+import isMobile from "../../src/utils/isMobile";
 
 /**
  * @member SearchbarTemplate
@@ -188,7 +189,7 @@ const SearchbarView = Backbone.View.extend(/** @lends SearchbarView.prototype */
 
         if (menuStyle !== "TABLE") {
             this.$el.html(this.template(attr));
-            if (window.innerWidth < 768) {
+            if (isMobile()) {
                 $(".navbar-toggler").before(this.$el); // prior of toggleButton
             }
             else {
@@ -292,7 +293,7 @@ const SearchbarView = Backbone.View.extend(/** @lends SearchbarView.prototype */
      * @returns {void}
      */
     setSearchInputWidth: function () {
-        if ($("#searchInput").closest(".collapse.navbar-collapse").length > 0 && window.innerWidth >= 768) {
+        if ($("#searchInput").closest(".collapse.navbar-collapse").length > 0 && !isMobile()) {
             this.$("#searchInput").width(window.innerWidth - $(".desktop").width() - 160);
             Radio.trigger("Title", "setSize");
         }
@@ -504,10 +505,8 @@ const SearchbarView = Backbone.View.extend(/** @lends SearchbarView.prototype */
             this.setMarkerZoom(hit);
         }
         else {
-            const isMobile = Radio.request("Util", "isViewMobile");
-
             // desktop - topics tree is expanded
-            if (hit && isMobile === false) {
+            if (hit && isMobile() === false) {
                 this.zoomToDesktopTopicTree(hit.id, hit.name);
             }
             // mobil
diff --git a/modules/snippets/slider/style.scss b/modules/snippets/slider/style.scss
index ce37ef43f2a217e5f265f883d8b10bfde0e2aee5..6dde1edb0f22c75558f6309ee4ab5d1f8998ac05 100644
--- a/modules/snippets/slider/style.scss
+++ b/modules/snippets/slider/style.scss
@@ -82,7 +82,7 @@
     font-size: $font-size-base;
     height: 24px;
 }
-@media (max-width: 767px) {
+@include media-breakpoint-down(md) {
     .slider-container {
         .slider-handle {
             width: 24px;
diff --git a/modules/tools/style.scss b/modules/tools/style.scss
index d36bf13803ba415ef8b42e9d8b79fe8f84bb5974..9001e7509d88052a6c348e28dad2d4692ee0e21a 100644
--- a/modules/tools/style.scss
+++ b/modules/tools/style.scss
@@ -34,7 +34,7 @@
         margin: 6px 0;
     }
 }
-@media (max-width: 767px) {
+@include media-breakpoint-down(md) {
     .dropdown-menu {
         border-right: 0;
         border-left: 0;
diff --git a/modules/window/style.scss b/modules/window/style.scss
index 7308e193416873fcdec54e2ee499004a4905834f..d8a3b0c04fb660e3edaa9f7d874e772195fe67e7 100644
--- a/modules/window/style.scss
+++ b/modules/window/style.scss
@@ -1,7 +1,7 @@
 @import "../../css/mixins.scss";
 @import "~variables";
 
-@media (max-width: 766px) {
+@include media-breakpoint-down(md) {
     .tool-window {
         right:0;
     }
@@ -60,7 +60,7 @@
             }
         }
     }
-    
+
     >.header-min {
         cursor: pointer;
         background-color: $light_red;
diff --git a/package.json b/package.json
index 891b234136766305bad401a523521e387f8274d3..9c8fa5209a0bb88267f804da293919e38664a1f8 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "start:ssl": "webpack-dev-server --config devtools/webpack.dev.js --https --cert devtools/certificate/localhost.pem --key devtools/certificate/localhost.key",
     "test": "mochapack --webpack-config devtools/webpack.test.js --bail --recursive --timeout 15000 ./test/unittests/**/*.test.js ./addons/**/unittests/*.test.js",
     "test:watch": "npm run test -- --watch",
-    "test:vue": "mochapack --recursive --webpack-config devtools/webpack.vue.test.js ./src/**/*.spec.js ./addons/!(cosi)/**/*.spec.js ./addons/cosi/!(node_modules)/**/*.spec.js",
+    "test:vue": "mochapack --recursive --webpack-config devtools/webpack.vue.test.js ./src/**/*.spec.js ./addons/*/!(node_modules)/**/*.spec.js",
     "test:vue:watch": "npm run test:vue -- --watch",
     "test:all": "npm run test && npm run test:vue",
     "test:all:watch": "npm-run-all --parallel test:watch test:vue:watch",
diff --git a/src/core/maps/store/actions/actionsMapMode.js b/src/core/maps/store/actions/actionsMapMode.js
index 0d1751e263ae5e29ec31ccbfaceebf889c105d37..94e912b1c852aeba477699b695ecee7da8a28060 100644
--- a/src/core/maps/store/actions/actionsMapMode.js
+++ b/src/core/maps/store/actions/actionsMapMode.js
@@ -63,7 +63,7 @@ export default {
             });
             allLayerModels.forEach(layerWrapper => {
                 if (layerWrapper.get("isSelected") === false && Radio.request("Parser", "getTreeType") === "light") {
-                    layerWrapper.removeLayer();
+                    layerWrapper.get("layer").setVisible(false);
                 }
             });
 
diff --git a/src/modules/controls/orientation/components/poi/PoiChoice.vue b/src/modules/controls/orientation/components/poi/PoiChoice.vue
index bbe554f0d5479b59b2f3726f07fcc049aed2aec3..5ff9a1666dc98dbece8d79f90d9ad464a12d9ff6 100644
--- a/src/modules/controls/orientation/components/poi/PoiChoice.vue
+++ b/src/modules/controls/orientation/components/poi/PoiChoice.vue
@@ -216,7 +216,7 @@ export default {
                 margin-left: 15px;
                 margin-bottom: 10px;
                 min-width: 60px;
-                @media (max-width: 479px) {
+                @include media-breakpoint-up(sm) {
                     margin-left: 0;
                     margin-bottom: 0;
                     width: 100%;
diff --git a/src/modules/language/components/LanguageItem.vue b/src/modules/language/components/LanguageItem.vue
index a99fbce3982404589cb170692106f1a65aa84b66..923712b0f2f0c3971e6309af0254872c194549cb 100644
--- a/src/modules/language/components/LanguageItem.vue
+++ b/src/modules/language/components/LanguageItem.vue
@@ -144,7 +144,7 @@ export default {
         }
     }
 
-    @media (max-width: 767px) {
+    @include media-breakpoint-down(md) {
         #language-bar {
             .current-language {
                 text-align: right;
diff --git a/src/modules/layerInformation/components/LayerInformation.vue b/src/modules/layerInformation/components/LayerInformation.vue
index 6112b0fae89ded87ba97c8b3fcd34bb2e1397ee5..6e40cb017625e65013f7f488411d88ace736cbb6 100644
--- a/src/modules/layerInformation/components/LayerInformation.vue
+++ b/src/modules/layerInformation/components/LayerInformation.vue
@@ -396,7 +396,7 @@ export default {
         box-shadow: 8px 8px 12px rgba(0, 0, 0, 0.176);
         border: 1px solid $light_grey;
 
-        @media (max-width: 768px) {
+        @include media-breakpoint-down(sm) {
             inset: 12px auto auto 0;
             max-width:750px;
             width: 95vw;
diff --git a/src/modules/portalFooter/components/PortalFooter.vue b/src/modules/portalFooter/components/PortalFooter.vue
index a57e57ea0efa80883f184c9ee0f1a249d362ad85..799233ffe5920c48a08d6c101ccdad4b767ba433 100644
--- a/src/modules/portalFooter/components/PortalFooter.vue
+++ b/src/modules/portalFooter/components/PortalFooter.vue
@@ -391,7 +391,7 @@ export default {
                     margin-bottom: 1rem;
                     line-height: 2.4rem;
                 }
-                @media (max-width: 768px) {
+                @include media-breakpoint-down(sm) {
                     p.info-bottom-titel {
                         margin-bottom: 0;
                     }
@@ -403,7 +403,7 @@ export default {
                 }
             }
         }
-        @media (max-width: 768px) {
+        @include media-breakpoint-down(sm) {
             .footer-info-div {
                 padding: 2rem 3rem;
             }
diff --git a/src/modules/tools/ToolTemplate.vue b/src/modules/tools/ToolTemplate.vue
index 83592ccba27fbd81cd7d991be74e7f09231e44a8..651bb42b7bb16871231aa192f7ca56e7587f97e3 100644
--- a/src/modules/tools/ToolTemplate.vue
+++ b/src/modules/tools/ToolTemplate.vue
@@ -372,11 +372,11 @@ export default {
         min-width: 280px;
         width: var(--initialToolWidth);
 
-        @media (max-width: 400px) {
+        @include media-breakpoint-down(sm) {
             right: 20px;
         }
 
-        @media (max-width: 767px) {
+        @include media-breakpoint-down(md) {
             width: var(--initialToolWidthMobile);
         }
 
@@ -455,7 +455,7 @@ export default {
         height: 100%;
         width: var(--initialToolWidth);
 
-        @media (max-width: 767px) {
+        @include media-breakpoint-down(md) {
             width: var(--initialToolWidthMobile);
         }
 
@@ -481,7 +481,7 @@ export default {
     }
 
 
-    @media (max-width: 767px) {
+    @include media-breakpoint-down(md) {
         .tool-window { right: 0; }
         #tool-sidebar-vue {
             position: fixed;
diff --git a/src/modules/tools/coordToolkit/components/CoordToolkit.vue b/src/modules/tools/coordToolkit/components/CoordToolkit.vue
index 5ccac2a90aed05bc76d08a7652293c2bfb401ba5..28c162716267a47d2fa64e2afffc0c89d5b24834 100644
--- a/src/modules/tools/coordToolkit/components/CoordToolkit.vue
+++ b/src/modules/tools/coordToolkit/components/CoordToolkit.vue
@@ -687,7 +687,7 @@ export default {
 <style lang="scss" scoped>
 @import "~variables";
 
-    @media (max-width: 767px) {
+    @include media-breakpoint-down(md) {
         .checkbox-container .form-inline {
             font-size: $font-size-base;
         }
@@ -751,7 +751,7 @@ export default {
         padding-left: 0;
         max-width: 50px;
     }
-   @media (max-width: 767px) {
+    @include media-breakpoint-down(md) {
         .eastingToBottomNoError{
             transform: translate(0px, 70px)
         }
diff --git a/src/modules/tools/filter/components/FilterList.vue b/src/modules/tools/filter/components/FilterList.vue
index 062263182c34d4f55d9f9a867f31441e0e50a4e6..262a3f1e155798254f41cb5fdbbaa70d465e910b 100644
--- a/src/modules/tools/filter/components/FilterList.vue
+++ b/src/modules/tools/filter/components/FilterList.vue
@@ -130,7 +130,7 @@ export default {
                 </a>
             </h2>
             <div
-                v-if="filter.shortDescription && !selectedLayers.includes(filter.filterId)"
+                v-if="filter.shortDescription && !selectedLayers.some(item => item.filterId === filter.filterId)"
                 class="layerInfoText"
             >
                 {{ translateKeyWithPlausibilityCheck(filter.shortDescription, key => $t(key)) }}
diff --git a/src/modules/tools/filter/components/LayerFilterSnippet.vue b/src/modules/tools/filter/components/LayerFilterSnippet.vue
index d96483fddd24d892a951839e19a93a0a11ac9e31..2ff459136fb1147422f768af070d4919e3aef66a 100644
--- a/src/modules/tools/filter/components/LayerFilterSnippet.vue
+++ b/src/modules/tools/filter/components/LayerFilterSnippet.vue
@@ -303,7 +303,7 @@ export default {
         setSearchInMapExtent (value) {
             this.searchInMapExtent = value;
 
-            if (this.layerConfig?.searchInMapExtentProactive !== false && this.isStrategyActive()) {
+            if (value === true && this.layerConfig?.searchInMapExtentProactive !== false && !this.layerConfig?.searchInMapExtentPreselected && this.isStrategyActive()) {
                 this.handleActiveStrategy();
             }
         },
@@ -849,6 +849,7 @@ export default {
             <SnippetCheckboxFilterInMapExtent
                 :info="layerConfig.searchInMapExtentInfo"
                 :filter-id="layerConfig.filterId"
+                :preselected="layerConfig.searchInMapExtentPreselected"
                 @commandChanged="setSearchInMapExtent"
             />
         </div>
diff --git a/src/modules/tools/filter/components/SnippetCheckboxFilterInMapExtent.vue b/src/modules/tools/filter/components/SnippetCheckboxFilterInMapExtent.vue
index fc4c74f9a7b27fe040198b6bfefce84981a5a23b..019f52f25d1cecf2ee5351da5837d6f8a0305dea 100644
--- a/src/modules/tools/filter/components/SnippetCheckboxFilterInMapExtent.vue
+++ b/src/modules/tools/filter/components/SnippetCheckboxFilterInMapExtent.vue
@@ -15,6 +15,11 @@ export default {
             type: [String, Boolean],
             required: false,
             default: true
+        },
+        preselected: {
+            type: Boolean,
+            required: false,
+            default: false
         }
     },
     data () {
@@ -30,6 +35,9 @@ export default {
             }
         }
     },
+    mounted () {
+        this.checked = this.preselected;
+    },
     methods: {
         /**
          * Emits the current command to whoever is listening.
diff --git a/src/modules/tools/gfi/components/templates/AttachedTemplate.vue b/src/modules/tools/gfi/components/templates/AttachedTemplate.vue
index a435c31b5d48a8fd0edba3927c5bd72360bb5bc2..88259944eb3dbdfbb0baff324e5395f2607c9535 100644
--- a/src/modules/tools/gfi/components/templates/AttachedTemplate.vue
+++ b/src/modules/tools/gfi/components/templates/AttachedTemplate.vue
@@ -208,7 +208,7 @@ export default {
             margin-bottom: 0;
         }
     }
-   @media (min-width: 768px) {
+    @include media-breakpoint-up(sm) {
     .gfi-content {
         max-height: 40vh;
         width: 100%;
diff --git a/src/modules/tools/gfi/components/themes/default/components/DefaultTheme.vue b/src/modules/tools/gfi/components/themes/default/components/DefaultTheme.vue
index 495f8f4e9ea989daedd57b8eb8a1c205a2f6a695..14cbf02dfdf0e9d55e60a1eddf81db6f26975a79 100644
--- a/src/modules/tools/gfi/components/themes/default/components/DefaultTheme.vue
+++ b/src/modules/tools/gfi/components/themes/default/components/DefaultTheme.vue
@@ -363,12 +363,12 @@ export default {
     height: 450px;
     resize: both;
 }
-@media (min-width: 768px) {
+@include media-breakpoint-up(sm) {
     .gfi-iFrame {
         width: 450px;
     }
 }
-@media (max-width: 767px) {
+@include media-breakpoint-down(sm) {
     .gfi-iFrame {
         width: 100%;
     }
diff --git a/src/modules/tools/layerSlider/components/LayerSlider.vue b/src/modules/tools/layerSlider/components/LayerSlider.vue
index 71a223d2149d377fc0596d1bf35010ccebc95d33..d7830fda5936541201080934216abc43680fa8f5 100644
--- a/src/modules/tools/layerSlider/components/LayerSlider.vue
+++ b/src/modules/tools/layerSlider/components/LayerSlider.vue
@@ -85,10 +85,12 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-#tool-layer-slider {
-    @media (min-width: 768px) {
-        min-width: 350px;
+    @import "~variables";
+
+    #tool-layer-slider {
+        @include media-breakpoint-up(sm) {
+            min-width: 350px;
+        }
     }
-}
 
 </style>
diff --git a/src/modules/tools/saveSelection/components/SaveSelection.vue b/src/modules/tools/saveSelection/components/SaveSelection.vue
index ee3a1f88eaaec630fa5e84001b19bf3680720c5c..abfc445a8b8c94a183c77d1fdc629dd947c94fd6 100644
--- a/src/modules/tools/saveSelection/components/SaveSelection.vue
+++ b/src/modules/tools/saveSelection/components/SaveSelection.vue
@@ -112,7 +112,7 @@ export default {
 <style lang="scss" scoped>
 @import "~variables";
 
-@media (min-width: 768px) {
+@include media-breakpoint-up(md) {
     form {
         width: 450px;
     }
diff --git a/src/modules/tools/searchByCoord/components/SearchByCoord.vue b/src/modules/tools/searchByCoord/components/SearchByCoord.vue
index 601935e43365a711301bf1e5bec8a7d30019e8a2..a121fd16fb6c2cc3aaf9a00fed666e81c7434e2e 100644
--- a/src/modules/tools/searchByCoord/components/SearchByCoord.vue
+++ b/src/modules/tools/searchByCoord/components/SearchByCoord.vue
@@ -210,8 +210,9 @@ export default {
 
 <style lang="scss" scoped>
     @import "~variables";
+
     #search-by-coord {
-        @media (min-width: 768px) {
+        @include media-breakpoint-up(md) {
             width: 350px;
         }
     }
diff --git a/src/modules/wmsTime/components/WmsTime.vue b/src/modules/wmsTime/components/WmsTime.vue
index f8f9d2e91e6a2ca2e88d8bb9dd0a722a4a429ac0..fbe04a10b25097f43a85f795c112fb3061ceac0d 100644
--- a/src/modules/wmsTime/components/WmsTime.vue
+++ b/src/modules/wmsTime/components/WmsTime.vue
@@ -44,6 +44,8 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+    @import "~variables";
+
     @mixin transform($value) {
         transform: translateX($value);
         transition: ease transform 250ms;
@@ -58,7 +60,7 @@ export default {
         @include transform(10%);
     }
 
-    @media (min-width: 1075px) {
+    @include media-breakpoint-up(lg) {
         .moveLeft {
             @include transform(-150%);
         }
diff --git a/src/utils/isMobile.js b/src/utils/isMobile.js
index d552cb20f5e446351663e1be9833b7365ebaa0be..0bf8ce1eb04b4e3e51eab595282722dc7eff7b33 100644
--- a/src/utils/isMobile.js
+++ b/src/utils/isMobile.js
@@ -1,10 +1,15 @@
+import variables from "../../css/variables.scss";
 
 /**
- * checks if the current window size indicates a mobile device
+ * Breakpoint in pixels at which to switch to mobile mode.
+ */
+const mobileBreakpoint = parseInt(variables["gridBreakpoints-md"], 10);
+
+
+/**
+ * Checks if the current window size indicates a mobile device.
  * @returns {Boolean}  true if screen is considered mobile device
  */
-function isMobile () {
-    return window.innerWidth < 768;
+export default function isMobile () {
+    return window.innerWidth < mobileBreakpoint;
 }
-
-export default isMobile;