diff --git a/src/components/builder/center/Artboard.js b/src/components/builder/center/Artboard.js
index 7a5f4c70..6651fcb5 100644
--- a/src/components/builder/center/Artboard.js
+++ b/src/components/builder/center/Artboard.js
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useEffect, useState } from 'react';
import { Helmet } from 'react-helmet';
import { useTranslation } from 'react-i18next';
import { useSelector } from '../../../contexts/ResumeContext';
@@ -13,9 +13,14 @@ import styles from './Artboard.module.css';
const Artboard = () => {
const state = useSelector();
const { t } = useTranslation();
+ const [width, setWidth] = useState(0);
const { id, name, metadata } = state;
const { template } = metadata;
+ useEffect(() => {
+ setWidth(typeof window !== `undefined` && window && window.innerWidth);
+ }, [typeof window !== `undefined` && window && window.innerWidth]);
+
return (
<>
@@ -25,7 +30,12 @@ const Artboard = () => {
-
+
{template === 'onyx' &&
}
{template === 'pikachu' &&
}
{template === 'gengar' &&
}
diff --git a/src/components/builder/center/Artboard.module.css b/src/components/builder/center/Artboard.module.css
index 045ab997..5ad63bf9 100644
--- a/src/components/builder/center/Artboard.module.css
+++ b/src/components/builder/center/Artboard.module.css
@@ -1,22 +1,9 @@
@media screen {
.container {
- width: 210mm;
- height: 297mm;
- zoom: 0.5;
+ width: 794px;
+ min-height: 1122px;
overflow: scroll;
box-shadow: var(--shadow);
@apply my-16 bg-white rounded;
}
}
-
-@media screen and (min-width: 1366px) {
- .container {
- zoom: 0.65;
- }
-}
-
-@media screen and (min-width: 1440px) {
- .container {
- zoom: 0.8;
- }
-}
\ No newline at end of file
diff --git a/src/components/builder/left/LeftSidebar.module.css b/src/components/builder/left/LeftSidebar.module.css
index 65c96f6d..cc4dbcbe 100644
--- a/src/components/builder/left/LeftSidebar.module.css
+++ b/src/components/builder/left/LeftSidebar.module.css
@@ -1,6 +1,5 @@
.container {
z-index: 10;
- box-shadow: var(--left-shadow);
@apply w-full h-screen overflow-scroll p-8;
@apply grid gap-8;
}
\ No newline at end of file
diff --git a/src/components/builder/right/RightSidebar.module.css b/src/components/builder/right/RightSidebar.module.css
index de68bb23..7f0ccf8c 100644
--- a/src/components/builder/right/RightSidebar.module.css
+++ b/src/components/builder/right/RightSidebar.module.css
@@ -1,6 +1,5 @@
.container {
z-index: 10;
- box-shadow: var(--right-shadow);
@apply w-full h-screen overflow-scroll p-8;
@apply grid gap-8;
}
diff --git a/src/pages/app/builder.module.css b/src/pages/app/builder.module.css
index c53f47c0..c475f80e 100644
--- a/src/pages/app/builder.module.css
+++ b/src/pages/app/builder.module.css
@@ -1,33 +1,19 @@
.container {
- @apply w-screen h-screen grid grid-cols-10;
+ @apply relative h-screen w-screen overflow-hidden flex items-start justify-center;
}
.left {
- @apply col-span-3;
+ width: calc(100vw / 4);
+ box-shadow: var(--left-shadow);
+ @apply bg-primary-50 absolute top-0 bottom-0 left-0 z-10;
}
.center {
- @apply col-span-4 h-screen overflow-scroll bg-primary-100 grid justify-center items-center;
+ @apply relative z-0 h-screen overflow-scroll;
}
.right {
- @apply col-span-3;
+ width: calc(100vw / 4);
+ box-shadow: var(--right-shadow);
+ @apply bg-primary-50 absolute top-0 bottom-0 right-0 z-10;
}
-
-@media screen and (min-width: 1440px) {
- .container {
- @apply grid-cols-11;
- }
-
- .left {
- @apply col-span-3;
- }
-
- .center {
- @apply col-span-5;
- }
-
- .right {
- @apply col-span-3;
- }
-}
\ No newline at end of file