Webflow sync, pageviews & more.
NEW

How can I remove auto-generated columns in Webflow's tablet view to make a navigation bar with only 4 columns and 2 rows?

TL;DR
  • Switch to Tablet View and select the affected navigation bar.
  • Adjust the Grid Layout in the Style Panel by setting it to 4 columns and 2 rows.
  • Reposition elements as needed to avoid gaps.
  • Check other breakpoints and make further adjustments for consistency.

Webflow automatically adjusts grid layouts in different breakpoints, sometimes adding extra columns in tablet view. To manually control the grid, follow these steps:

1. Switch to Tablet View

  • Click the Tablet icon in the Webflow Designer.
  • Your navigation bar may have more columns than intended due to Webflow's auto-adjustments.

2. Adjust the Grid Layout

  • Select the navigation bar that contains the unwanted columns.
  • Go to the Style Panel (right sidebar).
  • Find the Grid section.

3. Manually Define Grid Columns and Rows

  • Set the columns count to 4 and rows count to 2 under the Grid Layout settings.
  • Adjust column and row sizes as needed (e.g., using FR units or fixed pixel values).

4. Ensure Correct Element Placement

  • Check how items are positioned within the grid.
  • Drag and reposition items if necessary to avoid empty gaps.

5. Review Other Breakpoints

  • Switch to Mobile landscape and portrait views to ensure the layout remains correct.
  • Make further adjustments if needed.

Summary

Webflow may auto-adjust grid columns in tablet view, but you can override this by manually setting a 4-column, 2-row grid in the Style Panel. Ensure elements are positioned correctly and check other breakpoints for consistency.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I improve the mobile score above 90 on Google audits for webflow, particularly addressing the issue of First Contentful Paint 3G timing?
How can I filter and display specific types of houses in a certain location when using CMS data in Webflow?
How can I change the text in the footer of my Webflow slider based on the slide being viewed?
How can I resolve INP issues on my Webflow site detected by Google's Search Console, and improve the slow loading time of Webflow itself?
What is the difference between the account plan and the site plan in Webflow? Which plan would you recommend for creating a simple website with multiple sections, like a portfolio site, that is not business-oriented? Please help!
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How does Webflow handle the submission of passwords in its forms?
How can I create a fixed menu on Webflow's mobile version without causing page scroll behind the menu? Disabling the scroll offset option doesn't seem to work. Placing the navbar at the top also doesn't resolve the issue. What could be the problem with this option?
How can I optimize my video and photo-heavy website in Webflow to improve web vitals and handle JavaScript?
How can I create a background scroll interaction effect using Webflow?
Is it possible to integrate a booking app on a website that connects with a Google Calendar to show available time slots and allows the client to approve appointments before adding them to the calendar? What are the preferred web apps or tools to achieve this with Webflow?
What could be causing glitches in the Designer and live site of a specific Webflow project, specifically when using the CMS section, while other projects in the same account are not affected?
How can you access the content of a Webflow CMS website without rebuilding everything if the customer no longer wants to use the site as a CMS?
Can I add a sticky sidebar with section links on a CMS Collection Page template in Webflow, similar to Webflow's Article collection page template?
How can I fix the "Bad Request" and "ValidationError" error I am getting when trying to send a POST request from Zapier to Webflow using API integration?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?
How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?
How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I make the menu close when a link is clicked in Webflow?
How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?
How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?
How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?
Is there a way to fix the issue of values from Textareas with multiple lines not getting parsed correctly in Webflow Logic when posting to an external API?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!