thainv-dev: responsive
This commit is contained in:
@@ -141,7 +141,7 @@ const CLASS_FOR_SECTION = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="section_layout grid gap-x-5 gap-y-2.5" :class="[CLASS_FOR_SECTION.section_layout]">
|
||||
<div class="section_layout grid sm:gap-x-5 sm:gap-y-2.5 gap-[10px] lg:grid-cols-2" :class="[CLASS_FOR_SECTION.section_layout]">
|
||||
<div
|
||||
v-for="(position, index) in props.content || Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})"
|
||||
:key="index"
|
||||
@@ -159,11 +159,12 @@ const CLASS_FOR_SECTION = computed(() => {
|
||||
}
|
||||
|
||||
&.two_col_layout {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@apply md:grid-cols-2 grid-cols-1;
|
||||
}
|
||||
|
||||
&.three_col_layout {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
@apply lg:grid-cols-3 grid-cols-1;
|
||||
// grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
&.four_col_layout {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
|
||||
Reference in New Issue
Block a user