When I make a table using the grid system, there is no problem when viewing it on a PC, but when viewing it on an ipad or iphone, the vertical margins of the table become very long (due to the amount of text in the other table cells), is there any way to solve this problem?
Hard to say without looking directly at your project but try these and see if something works!
- Adjust the grid for smaller devices: Webflow’s grid system allows you to set different layouts for different breakpoints. When switching to iPad or iPhone view in the designer, try adjusting the number of rows or columns to suit the smaller screen size. This could help prevent elements from stretching vertically.
- Adjust the cell alignment: In your grid settings, you can adjust the alignment of your cells. By default, they are set to “stretch,” which could be why your cells are expanding vertically. Try setting it to “start,” “center,” or “end” to see if it helps with your issue.
- Use overflow settings: If the issue is due to a large amount of text within a cell, consider setting the overflow property of that cell to “auto” or “scroll”. This will create a scrollbar for the text within that cell and prevent it from stretching the cell vertically.
- Adjust the font size: Another way to control the amount of space your text takes up is by adjusting the font size. You can set different font sizes for different breakpoints, so try using a smaller font size for the iPad and iPhone views.
- Play with text layout settings: Another option could be changing the text’s line-height or margin/padding to reduce the overall size of the text block.
Let me know if this is helpful or if anything is unclear!
thanks!
For clarity, I have attached an image for you to look at and check!
※The height of the table’s cells is not set.
You have to select third row in grid cells and size it auto or give it a specific height
Is there a setting that automatically adjusts the height depending on the amount of text?