Can't make it 2 columns on small screen

I have a custom widget

<x-filament-widgets::widget>
    <x-filament::section>
            <div class="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-5 text-center">
                @foreach ($this->getNavigationItems() as $item)
                    <a href="{{ $item->getUrl() }}" class="p-4 border-2 border-black rounded-lg bg-red-100 shadow hover:bg-gray-100">
                            @if ($item->getIcon())
                                <x-dynamic-component :component="$item->getIcon()" class="w-6 h-6 mx-auto" />
                            @endif
                            <h3 class="mt-2 text-lg font-semibold text-red-500">{{ $item->getLabel() }}</h3>
                    </a>
                @endforeach
        </div>
    </x-filament::section>
</x-filament-widgets::widget>

<x-filament-widgets::widget>
    <x-filament::section>
            <div class="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-5 text-center">
                @foreach ($this->getNavigationItems() as $item)
                    <a href="{{ $item->getUrl() }}" class="p-4 border-2 border-black rounded-lg bg-red-100 shadow hover:bg-gray-100">
                            @if ($item->getIcon())
                                <x-dynamic-component :component="$item->getIcon()" class="w-6 h-6 mx-auto" />
                            @endif
                            <h3 class="mt-2 text-lg font-semibold text-red-500">{{ $item->getLabel() }}</h3>
                    </a>
                @endforeach
        </div>
    </x-filament::section>
</x-filament-widgets::widget>

for some reason grid-cols-2 does not work, only 1 or 3 works. I am guessing since Filament only comes with select tailwind classes cols-2 isn't working.

Solution:

You’ll need to do a custom theme if you’re using panels and make sure your custom widget’s views are in the content of the theme tailwind.config.js

Jump to solution

2 Replies

Solution

awcodes•2mo ago

You’ll need to do a custom theme if you’re using panels and make sure your custom widget’s views are in the content of the theme tailwind.config.js

MZXOP•2mo ago

Thanks buddy, I will give it a shot Worked, thanks a lot

Gaming

Programming

Can't make it 2 columns on small screen