diff --git a/js/packages/web/src/styles/app.less b/js/packages/web/src/styles/app.less
index 9c48caa..842bfc8 100644
--- a/js/packages/web/src/styles/app.less
+++ b/js/packages/web/src/styles/app.less
@@ -260,3 +260,9 @@ h1 {
 model-viewer {
   --poster-color: transparent;
 }
+
+.creator-base-page{
+  @media (max-width: @screen-sm-min) {
+    padding: 15px;
+  }
+}
diff --git a/js/packages/web/src/views/artCreate/index.tsx b/js/packages/web/src/views/artCreate/index.tsx
index e084ca8..ddb9317 100644
--- a/js/packages/web/src/views/artCreate/index.tsx
+++ b/js/packages/web/src/views/artCreate/index.tsx
@@ -131,7 +131,7 @@ export const ArtCreateView = () => {
 
   return (
     <>
-      <Row style={{ paddingTop: 50 }}>
+      <Row className={"creator-base-page"}  style={{ paddingTop: 50 }}>
         {stepsVisible && (
           <Col span={24} md={4}>
             <Steps
diff --git a/js/packages/web/src/views/auctionCreate/index.tsx b/js/packages/web/src/views/auctionCreate/index.tsx
index 57531fd..ca3c141 100644
--- a/js/packages/web/src/views/auctionCreate/index.tsx
+++ b/js/packages/web/src/views/auctionCreate/index.tsx
@@ -616,7 +616,7 @@ export const AuctionCreateView = () => {
 
   return (
     <>
-      <Row style={{ paddingTop: 50 }}>
+      <Row className="creator-base-page" style={{ paddingTop: 50 }}>
         {stepsVisible && (
           <Col span={24} md={4}>
             <Steps
diff --git a/js/packages/web/src/views/styles.less b/js/packages/web/src/views/styles.less
index f7ee185..2a3b777 100644
--- a/js/packages/web/src/views/styles.less
+++ b/js/packages/web/src/views/styles.less
@@ -127,6 +127,8 @@
 
   background: linear-gradient(270deg, #616774 7.29%, #403f4c 100%);
   border-radius: 8px;
+  max-width: 100%;
+  white-space: normal;
 }
 
 .type-btn:hover {