Archived topic
Grid container is not mobile friendly
15 replies · Started by Nitin on November 17, 2020
Hey team, I just made a table using Grid within Container. But, it is not mobile-friendly. What should I do to make it mobile-friendly?
Desktop version- https://nimb.ws/vTcSZL
Mobile version- https://nimb.ws/rwOQpH
Hi there,
can you provide a link to your page where i can see the issue?
Actually, the article is in the draft. I previewed it and found the situation I shared in screenshots.
Can you try publishing a test post to see the result?
I just published a test post, here is the link-
https://www.totalboxofficeincome.xyz/hello-world/
It is not mobile-friendly.
Select each of the Grid column blocks, the in the settings sidebar, select Mobile, and change the blocks % width to 100%.
https://docs.generateblocks.com/article/container-overview/#grid-item
It is still the same. Here is the setting which you asked me to change-
https://nimb.ws/l70orW
And this is the result after the change, it is the same-
https://nimb.ws/DPmSxi
The grid container is not responsive to the size of the device.
try clearing your browser cache on that test page - i just checked it and the Columns are stacking.
Yes, you are correct. But, don't you think it is ugly to see a price table's columns in a stacking manner. It should be as it shows on the Desktop.
How can I show the table linearly on mobile devices?
How would that work ? A mobile device just isn't wide enough to display them well side by side.
Do you have an example of one ?
Yes, you may visit the http://www.grabltd.com homepage. I want the same layout that this site uses to display deals on its homepage.
How can I do it?
Which part of that site ?
Is the columns below:
Hurry Up!! Lifetime Deal Ending Soon..
Or the table below:
All Active Lifetime Deals at One Place
All active lifetime deals at one place.
That site is using a Table. You can do something similar with the Grid Block. Instead of creating a 3 column grid, you would create 3 column rows. Each element has responsive controls, so you can adjust them to suit for smaller devices.
I made a quick video:
https://www.screencast.com/t/TlEXq300
Note: I am using the current GB 1.2 Beta which has in editor responsive views:
Thanks a lot, David.
It is perfect now.
Thank you very much.