Mobile Layout for GridView

Is there a better way to fix the layout of the GridView when browsing in mobile phones?

gridview renders a html table, you should look into how to make your tables responsive.

I see, I will look into that thanks!

Btw, does using Mobile Detect helps?

you could use mobile/device detect to add a class to your gridview and style with css.

// your template file


    'options' => ['class' => '' . (is_mobile() ? ' grid-view-mobile' : '')]

    // ...


// your css file might contain style for that class 

.grid-view-mobile {


note: is_mobile() is an dummy function it does not exist you have to write that logic to detect device.

Thanks for the tip, I have already found a solution. I realised I have installed the Kartik GridView widget and it has a responsive function so that’s what I have used.