How can I delete columns in the grid at the bottom of the page for mobile and tablet views on my Webflow site?
TL;DR
- Switch to the Tablet or Mobile breakpoint, select the grid, and click "Edit Grid."
- Delete unwanted columns using the trash icon, reassign items as needed, and rearrange grid content; changes apply only to the selected breakpoint.
To delete columns in a grid on mobile and tablet views, you need to adjust the grid layout responsively using Webflow’s visual designer. This won’t remove content but will change the layout for smaller screens.
1. Open the Grid in the Proper Breakpoint
- Switch to Tablet or Mobile view by clicking the respective icons in the Webflow Designer's top bar.
- Select the grid element at the bottom of the page.
2. Modify Grid Structure for the Selected Breakpoint
- In the Styles panel, scroll to the Layout → Display: Grid section.
- Click the "Edit Grid" button (the pencil icon) to open the grid editor.
3. Delete Unwanted Columns (for that breakpoint only)
- Hover over the column(s) you want to delete and click the trash icon.
- Webflow will ask how to reassign items that were in that column. You can:
- Auto-place into remaining cells, or
- Manually move them after you delete the column.
4. Reassign and Reorganize Grid Items
- After deleting columns, some items may overlap or shift.
- Drag items into the correct grid area or use the Grid Item settings in the Styles panel to define their row/column position.
5. Confirm Changes are Breakpoint-Specific
- Your grid changes apply only to the selected (e.g., tablet or mobile) breakpoint.
- Larger breakpoints (like Desktop) will not be affected.
Summary
To remove grid columns on tablet and mobile views, switch to that breakpoint, enter Edit Grid, delete the columns with the trash icon, and manually reorganize the content. These changes affect only the selected screen size layout.