Streaming live at 10am (PST)

Mobile phone view issues with grid


#1

Here is my public share link: [ https://preview.webflow.com/preview/urhonor2?utm_source=urhonor2&preview=3474a66621fa896e4993101e1a806bb8 ]

Hello as the title says, im having an issue with the grid items i set up in the phone view (smallest one) look fine in the design workspace however when i look at them in the live preview the items are pushed to the left and cut off.

I might not fully understand grid. I can also see the extra rows and columns outside of the phone image. is that supposed to be there? i was thinking I should be able to delete and resize the extra rows to make the grid actually fit inside the phone image but that doesnt seem to work. that results in the grid inside the phone being slightly off center

TIA
Greg


#2

Hi, you’re fb_contain div should be set to 100% width. The one just above your grid.
The way I understand it in grid, if you use FR (fractional) is not a real value, so the container needs a real value,in this case 100%.


#3

hi
that didnt change anything for me. i did go to the fb_hero1 div and make that 100% . thats seemed to get the grid to act right. the image columns stiff wont stretch to fill the grid area. also they arent centered inside their divs either


#4

@Homelogicatl i do not design the same way as you have done with the grid. I can se that you have the same anount of columns and rows regardless of breakpoint.

For each break point Web, iPad, mobile i do have a different layout of the grid. In my phone layout i only have one column.


#5

I dont know what im doing wrong but if I delete all the columns (on the edit pane to the left) they are still there in the work space. just…“empty” hope that makes sense


#6

This how i do it.
Web 5 Col 3 rows
iPad 5 Col 3 rows
Mobile landscape 2 Col 8 rows ( rearange elements in grid)
Mobile port 1 Col 15 rows ( rearange again )