How can I set up the block display in Webflow to prevent scrolling within the block and ensure the footer is visible? Can I add a new div block that is visible only in the mobile view and hidden in the desktop view in Webflow?

Published on
September 22, 2023

To set up the block display in Webflow to prevent scrolling within the block and ensure the footer is visible, you can follow these steps:

  1. Select the parent container element that you want to prevent from scrolling.
  2. In the Styles panel on the right-hand side, click on the "Display" property.
  3. Choose the "Flex" option from the dropdown menu. This will enable you to use the flexbox layout for the element.
  4. Once you've set the display to flex, you can adjust the flex properties to achieve the desired layout. For example, you can set the "Justify" property to "Space-between" to push the content to the top and bottom of the container.
  5. To ensure that the footer is always visible, you can set its position to "fixed" by selecting it and going to the Styles panel. In the position dropdown menu, choose "Fixed." This will keep the footer at the bottom of the viewport, regardless of how much content is in the container.

Regarding adding a new div block that is visible only in the mobile view and hidden in the desktop view in Webflow, you can accomplish this using Webflow's built-in responsive design features. Here's how:

  1. Select the element or container where you want to add the div block.
  2. In the Styles panel, click on the "+" icon to add a new element inside the selected container.
  3. Choose the "Div Block" option from the element list.
  4. With the new div block selected, go to the Settings tab in the Styles panel.
  5. Under Display Settings, you'll find the options for hiding and showing the element in different device views. You can select "Hide on desktop" to hide the div block on desktop screens and make it visible only on mobile devices.
  6. To fine-tune the visibility settings, click on the "Display" property and choose the desired display option for each device view: show, hide, or auto.

By following these steps, you can easily set up the block display in Webflow to prevent scrolling within the block and ensure the visibility of the footer. Additionally, you can leverage Webflow's responsive design capabilities to control the visibility of elements based on different device views.

Additional Questions:

  1. How can I make a div block sticky in Webflow?
  2. Is it possible to create a multi-page website in Webflow?
  3. How do I optimize my Webflow site for search engines?