Streaming live at 10am (PST)

How to stop columns from auto-generating in a Grid Display?

I feel like I’m posting here everyday lately so apologise in advance for the thread spam!

I’ve got a perfectly working desktop view however when I go into my tablet view it auto generated 3 columns!! does anyone know an easy way to get rid of these because I can’t seem to delete them. I want this nav bar to be only 4 columns and 2 rows.


Here is my site Read-Only: https://preview.webflow.com/preview/pjx-mini-slider-25adea484-019a01c442ec0?utm_medium=preview_link&utm_source=dashboard&utm_content=pjx-mini-slider-25adea484-019a01c442ec0&preview=bc66c0b51990e09668403097c1123adb&mode=preview

Hey Boris! Looks like there is an area set that’s causing this. Looks like it’s inherited from your Section class, so I don’t know if there’s another grid that would be affected, but deleting it fixes this.

1 Like

Yep this was it! thanks @parker

1 Like

I wonder if one of you might be able to help me out - I have a bunch of auto-generated rows here that will delete in the vertical mobile view and don’t show up in the desktop view but won’t delete in the horizontal mobile or the tablet views. Any idea why/how?

Screen Shot 2020-03-25 at 1.37.43 PM|690x395

https://preview.webflow.com/preview/mc-impact-report?utm_medium=preview_link&utm_source=designer&utm_content=mc-impact-report&preview=bc0648905b586f86a6e7a0cb4df4c419&mode=preview

Hi @ansleyluce Ansley,

It looks like you had played with the Areas feature once before. I would recommend using the Alt + Click function on the “Blue” Highlighted “Area” name within the Grid settings to remove any unused Areas.

When I did that on Desktop and Tablet it removed 29 rows instantly. Also under tablet view you have “Grid Container 7” that is set to Display:None but it is using rows 20-23 anyways. It may be hidden but it is still there which means that those rows will show even if no element is viewable.

Just go through your Grid design and I would recommend using Auto placement for as much as you can and only use Manual if you need to override placement. This will eliminate most of those extra rows as well. https://share.getcloudapp.com/WnuNW8q0

Please let me know if you have any other questions,

~ Happy Designing ~
Brandon

I have a similar situation but my grid has no ‘Areas’ set so I can not remove them.

I am using the Grit theme and I am in the process of optimizing for tablet and smaller views.

In the Theme, they have 12-col in desktop, 8-col in tablet and so forth in the smaller dimensions.

In tablet, my approach was to simply delete the two extra columns to go from 12 to 8-cols but I am left with two phantom columns. Not quite sure how to remove them.

I have also tried creating a new grid in tablet mode, creating 8-col and rolling the files into it and deleting the old grid. However, when I add the class back, it adds the phantom columns back in since that class has the 12-col. In the grit theme, they have the same class name for the 12-col (desktop) and 8-col (tablet).

How did they accomplish this in the Grit theme?

I find with Webflow there is usually some magical simplicity that my overthinking causes me to overlook.

https://preview.webflow.com/preview/business-boosters-biz?utm_medium=preview_link&utm_source=dashboard&utm_content=business-boosters-biz&preview=60afdab7386065d962143992d5d803e5&mode=preview

try resize div block

1 Like

Thanks you @guoshuzhang :100:

Gosh, I knew it was something simple!