Fix Responsive

components/dynamic-page/page-section/layouts/none/Default.vue

@@ -167,8 +167,8 @@ const CLASS_FOR_SECTION = computed(() => {
     case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_LEFT_TWO"]:
       _classForSection = {
         section_layout: "section_layout twelve_col_layout",
-        0: "sm:col-span-8 col-span-12",
+        0: "md:col-span-8 col-span-12",
-        1: "sm:col-span-4 col-span-12",
+        1: "md:col-span-4 col-span-12",
       };
       break;
     case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_RIGHT_TWO"]:
@@ -307,6 +307,7 @@ const mapActivesToItems = (index: number) => {
     >
       <RecusiveSection :type="position.type" :id="position.data" :section="props.section" />
     </div>
+    <div v-if="LAYOUT_PARSE['div.background']?.includes('display:block;')" class="attributeBackground" :style="LAYOUT_PARSE['div.background']"></div>
   </div>
 </template>
 
@@ -320,6 +321,15 @@ const mapActivesToItems = (index: number) => {
   display: grid;
   position: relative;
 
+  .attributeBackground {
+    position: absolute;
+    height: 100%;
+    z-index: 0;
+    display: none;
+    left: -50vw;
+    width: 150vw;
+  }
+
   .section_child {
     z-index: 1;
   }

components/dynamic-page/page/templates/index.vue

@@ -33,6 +33,7 @@ const GET_PROPS = computed(() => {
 
 <template>
     <component 
+    class="overflow-x-hidden"
         v-if="definedDynamicPage[getCurrentTemplate]" 
         :is="definedDynamicPage[getCurrentTemplate]" 
         v-bind="{...(GET_PROPS()), settings: _props.settings}"