diff --git a/packages/client/src/components/BreakpointWarning/BreakpointWarning.js b/packages/client/src/components/BreakpointWarning/BreakpointWarning.js
index bae09fe8b0..6e5e408846 100644
--- a/packages/client/src/components/BreakpointWarning/BreakpointWarning.js
+++ b/packages/client/src/components/BreakpointWarning/BreakpointWarning.js
@@ -6,25 +6,38 @@ import StyledBreakpointWarning from "./sub-components/StyledBreakpointWarning";
 import Loader from "./sub-components/loader";
 import { inject, observer } from "mobx-react";
 
-const BreakpointWarning = ({ t, sectionName, tReady, theme }) => {
+const BreakpointWarning = ({
+  t,
+  sectionName,
+  tReady,
+  theme,
+  isSmallWindow,
+}) => {
+  const textHeader = isSmallWindow
+    ? t("BreakpointSmallText")
+    : t("BreakpointWarningText");
+
+  const textPrompt = isSmallWindow ? (
+    t("BreakpointSmallTextPrompt")
+  ) : (
+    <Trans t={t} i18nKey="BreakpointWarningTextPrompt" ns="Settings">
+      "Please use the desktop site to access the {{ sectionName }}
+      settings."
+    </Trans>
+  );
+
+  const img = theme.isBase
+    ? BreakpointWarningSvgUrl
+    : BreakpointWarningSvgDarkUrl;
+
   return !tReady ? (
     <Loader />
   ) : (
     <StyledBreakpointWarning>
-      <img
-        src={
-          theme.isBase ? BreakpointWarningSvgUrl : BreakpointWarningSvgDarkUrl
-        }
-      />
-
+      <img src={img} />
       <div className="description">
-        <div className="text-breakpoint">{t("BreakpointWarningText")}</div>
-        <div className="text-prompt">
-          <Trans t={t} i18nKey="BreakpointWarningTextPrompt" ns="Settings">
-            "Please use the desktop site to access the {{ sectionName }}
-            settings."
-          </Trans>
-        </div>
+        <div className="text-breakpoint">{textHeader}</div>
+        <div className="text-prompt">{textPrompt}</div>
       </div>
     </StyledBreakpointWarning>
   );
diff --git a/packages/client/src/pages/PortalSettings/categories/common/branding.js b/packages/client/src/pages/PortalSettings/categories/common/branding.js
index 664bd9c8c9..028d87d01c 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/branding.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/branding.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { withTranslation } from "react-i18next";
 
 import { inject, observer } from "mobx-react";
-import { isMobile } from "react-device-detect";
+import { isMobile, isDesktop } from "react-device-detect";
 
 import withLoading from "SRC_DIR/HOCs/withLoading";
 import Whitelabel from "./Branding/whitelabel";
@@ -60,7 +60,7 @@ const Branding = ({
   isSettingPaid,
   standalone,
 }) => {
-  const [viewDesktop, setViewDesktop] = useState(false);
+  const [isSmallWindow, setIsSmallWindow] = useState(false);
 
   useEffect(() => {
     return () => {
@@ -78,14 +78,19 @@ const Branding = ({
   }, []);
 
   const onCheckView = () => {
-    if (!isMobile && window.innerWidth > 1024) {
-      setViewDesktop(true);
+    if (isDesktop && window.innerWidth < 795) {
+      setIsSmallWindow(true);
     } else {
-      setViewDesktop(false);
+      setIsSmallWindow(false);
     }
   };
 
-  if (!viewDesktop)
+  if (isSmallWindow)
+    return (
+      <BreakpointWarning sectionName={t("Settings:Branding")} isSmallWindow />
+    );
+
+  if (isMobile)
     return <BreakpointWarning sectionName={t("Settings:Branding")} />;
 
   return (