diff --git a/index.html b/index.html
index ef41dce..cac33c7 100644
--- a/index.html
+++ b/index.html
@@ -10,8 +10,8 @@
style="--primary: hsl(181, 75%, 26%); --secondary: hsl(181, 75%, 35%); --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)"
value='{"sections": [
{"name": "Personal", "intro": "Jaöaöd", "fields": [
- {"name": "Vorname", "type": "TextField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": "", "required": true},
- {"name": "Essen", "type": "CheckboxesField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": [], "required": true, "options": ["lal", "fff", "ccc"]},
+ {"name": "Vorname", "type": "TextField", "columns": {"mobile": 1, "tablet": 2, "desktop": 3}, "default": "", "required": true},
+ {"name": "Essen", "type": "CheckboxesField", "columns": {"mobile": 1, "tablet": 2, "desktop": 3}, "default": [], "required": true, "options": ["lal", "fff", "ccc"]},
{"name": "Datenschutz", "description": "Ich akzeptire das abfghg", "type": "CheckboxField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": false, "required": true},
{"name": "Geschlecht", "type": "DropdownField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": null, "required": true, "options": ["A","Bb","Cc"]},
{"name": "Essgewohnheiten", "type": "RadioField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": null, "required": true, "options": ["A","Bb","Cc"]},
diff --git a/src/Eventform.ce.vue b/src/Eventform.ce.vue
index 27fed9c..9c303df 100644
--- a/src/Eventform.ce.vue
+++ b/src/Eventform.ce.vue
@@ -79,8 +79,18 @@
-
-
+
+
@@ -130,6 +140,33 @@ import DeleteIcon from './components/icons/DeleteIcon.vue';
const emits = defineEmits(['editSection']);
+const colClasses = {
+ mobile: {
+ 1: 'col-span-1',
+ 2: 'col-span-2',
+ 3: 'col-span-3',
+ 4: 'col-span-4',
+ 5: 'col-span-5',
+ 6: 'col-span-6',
+ },
+ tablet: {
+ 1: 'sm:col-span-1',
+ 2: 'sm:col-span-2',
+ 3: 'sm:col-span-3',
+ 4: 'sm:col-span-4',
+ 5: 'sm:col-span-5',
+ 6: 'sm:col-span-6',
+ },
+ desktop: {
+ 1: 'lg:col-span-1',
+ 2: 'lg:col-span-2',
+ 3: 'lg:col-span-3',
+ 4: 'lg:col-span-4',
+ 5: 'lg:col-span-5',
+ 6: 'lg:col-span-6',
+ },
+};
+
const props = defineProps({
eventId: {
type: Number,