How can I fix the issue of not being able to delete columns in the mobile views on my Webflow design with a grid and cards?

Published on
September 22, 2023

To fix the issue of not being able to delete columns in the mobile views on your Webflow design with a grid and cards, you can follow these steps:

  1. Select the grid element: Click on the grid element in the Webflow Designer to ensure it is selected.

  2. Enable responsive editing: In the top-right corner of the Designer, you'll find the responsive editing options. Click on the icon that resembles a smartphone to enable the mobile view editing mode.

  3. Adjust column settings: In the mobile view, you may notice that the grid columns are not aligned as you intended. To correct this, select the grid element again and open the grid settings panel on the right side of the Designer.

  4. Adjust column widths: Under the "Mobile" tab in the grid settings panel, adjust the column widths to achieve the desired alignment. You may need to increase or decrease the width of the columns to fit your content correctly.

  5. Delete unnecessary columns: To remove unwanted columns, simply click on the column you want to delete, and then press the delete key on your keyboard. Repeat this step for any additional columns you wish to remove.

  6. Test your changes: Once you have made the necessary adjustments and removed the unwanted columns, preview your design in the mobile view to ensure everything appears as intended. You can do this by clicking the preview button in the top-right corner of the Designer.

By following these steps, you should be able to fix the issue of not being able to delete columns in the mobile views on your Webflow design with a grid and cards.

Additional Questions:

  1. How do I enable responsive editing in Webflow?
  2. Can I customize the column widths in a Webflow grid?
  3. What are some best practices for designing mobile-friendly websites on Webflow?