{
id: "b2",
label: "COLUMNS",
media: `<svg
aria-hidden="true"
focusable="false"
data-prefix="fal"
data-icon="columns-3"
class="svg-inline--fa fa-columns-3 fa-3x"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
width="40"
height="60"
style="margin-left: 12px;margin-top: 5px;"
>
<path
fill="currentColor"
d="M0 96C0 60.65 28.65 32 64 32H576C611.3 32 640 60.65 640 96V416C640 451.3 611.3 480 576 480H64C28.65 480 0 451.3 0 416V96zM448 448H576C593.7 448 608 433.7 608 416V96C608 78.33 593.7 64 576 64H448V448zM416 64H224V448H416V64zM192 448V64H64C46.33 64 32 78.33 32 96V416C32 433.7 46.33 448 64 448H192z"
></path>
</svg>
`,
//final content for columns
//i think problem with the dymic id
content: {
type: 'div', // Define the main container type
components: [
{
type: 'div', // First inner div
components: [],
style: {
width: '100%',
height: '100px',
margin: '5px'
}
},
{
type: 'div', // Second inner div
components: [],
style: {
width: '100%',
height: '100px',
margin: '5px'
}
}
],
style: {
display: 'flex',
'flex-direction': 'row',
'justify-content': 'flex-start',
'align-items': 'stretch',
'flex-wrap': 'nowrap',
'min-height': '40px',
media: '@media (max-width: 768px)', // Apply media query to the container
styleMedia: {
'flex-direction': 'wrap' // Adjust styles for the media query
}
},
}
},
this is the grapes js column block working fine but its not responsive i am trying to make it responsive at mobile view tablet view how we can do that ..?
