- This topic has 15 replies, 2 voices, and was last updated 1 year, 7 months ago by
.
-
Posts
-
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
Customer Support
Hi there,
can you provide a link to your page where i can see the issue?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/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?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/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
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/It is still the same. Here is the setting which you asked me to change-
https://nimb.ws/l70orWAnd this is the result after the change, it is the same-
https://nimb.ws/DPmSxiThe 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/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 ?Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/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 PlaceDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/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:
Note: I am using the current GB 1.2 Beta which has in editor responsive views:
https://generateblocks.com/generateblocks-1-2-0/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/Thanks a lot, David.
It is perfect now.
Thank you very much.
- You must be logged in to reply to this topic.