Mobile grid display problem

Hi! I’ve already looked for solution to my problem here, but none of the answers really helped. So i’m having an issue with the grid items i set up in the phone view (smallest one), it displays properly on larger screens but on the mobile view the items are pushed to the left and cut off. It happend when i add a content inside the grid and changed rows dimensions.

Any help will be truly appreciated!
wesite preview:

Here is my site Read-Only:

1 Like

Hi there. It appears your Grid is too wide for mobile:

If you delete, say, x3 columns you’ll see it will automatically refit to mobile view. This will not upset the grid in other views. Its magic like that :slight_smile:

Thank you! It works and it’s magic but now the grid content is displayed in the wrong order. So i guess i can’t change it on mobile cause it will affects other views too. Any idea what can I do?

If I was building this, (and as a general rule of thumb for working with grids) I’d start by putting a div box into a grid cell, then putting what’s required into that div box meaning that you have very few rows and columns. For example, for ‘Art’, first drop a div into an empty grid cell, then drop your icon + text box into that div (i’d make the div flex, set to vertical + centre content). That way, you don’t need x2 grid rows, just one.

Then, you’ll be able to change the order of items easily in the final grid by simply moving the div order in the Navigator. Hope that makes sense!

Basically, I’d ALWAYS drop empty divs into a Grid, then copy content INTO those divs rather than the Grid cell itself. You’ll have much more control that way and far less columns / rows.

1 Like

thanks a lot! :heart: that’s smart

1 Like