[Resolved] Adjusting Grid Layout on mobile

[Author]

Posts

[Simphiwe Ntuli]

Hi there,

I have a grid view on my website for the tenders page see Tenders PNG.
It looks great on Desktop but on mobile it's not so great, see Mobile Tenders PNG.
Best case scenarion would be to have the headings then the texts directly below the headings for each column but any other option is also acceptible I just need this view to be user-friendly.

Regards

[Mateus Getulio]

Hi Simphiwe,

Can you please confirm if you're using the legacy views to create the grid or if you're building it with blocks?

From the screenshots, it looks like this View was created as a table-based grid.

The responsive design features included with Toolset work best with the Bootstrap grid View, instead of the table-based grid design. So you should edit this View and click "Loop Wizard" and select the Bootstrap grid style. The basic HTML markup structure will be inserted, then you can add your own responsive layout CSS classes as needed.

[Simphiwe Ntuli]

Not sure but please see attached screenshot, hopefully that helps answer your question.

[Mateus Getulio]

Hi,

Thank you for sharing that screenshot.

To suggest the best way to achieve this, I'll need to see how this view is set up in the admin area.

Can you please share temporary admin login details along with a link to a page where this view can be seen?

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

regards,
Mateus

[Mateus Getulio]

Hi Simphiwe,

Thank you for providing the backup of the site. It would be more effective for us to make the necessary changes if we could access the site directly online. This way, you can see the modifications in real-time and provide any feedback more efficiently.

To overcome this, I created a sandbox environment with a fresh install of Toolset.

If possible, could you set up a similar structure on the sandbox environment: hidden link

This will allow us to replicate your setup and implement the required changes more quickly.

If using the sandbox is not feasible for you, please let me know, and I will proceed with the package installation and debugging locally.

Looking forward to your response!

Best regards,
Mateus

[Simphiwe Ntuli]

Good Day,

I trust you are well.
Hi there, unfortunately I have a tight deadline so it help me greatly if you used the backup as it already has everything that you need to see.

Regards

[Mateus Getulio]

Hello there,

I checked it and the adjustment is a simple one. I noticed you're already using the grid view rather than the table. The grid view is already responsive. In order to bring the text immediately after the title, I added both of them in the same 'parent' block rather than having two separate blocks for each element.

Please notice that after doing it, some style changes might be necessary, mostly, updating the padding and margins will do.

Please check the screenshots for further reference.

Thank you,
Mateus

[Simphiwe Ntuli]

This is it, perfect!!!!!