How can I format the box where the website inputs their phone number to be flush with the "Download Now" button in Webflow?

Published on
September 22, 2023

To format the box where the website inputs their phone number to be flush with the "Download Now" button in Webflow, you can follow these steps:

  1. Select the box element containing the phone number input field. Make sure you're in the Designer view.

  2. In the right sidebar, go to the "Styles" tab.

  3. Under the "Position" section, change the element's position to "Relative". This will allow you to control its positioning based on its original location on the page.

  4. Enter a specific value for the "Top" property. This will determine how far the box moves down from its original position. You can experiment with different values to achieve the desired alignment. For example, you can try setting it to "-10px" to bring it up slightly.

  5. If the phone number box is not aligned with the "Download Now" button horizontally, you can adjust the "left" or "right" property to move it closer or further away from the button. Make sure to set the appropriate units (e.g., "px" for pixels).

  6. Preview and test the changes by clicking the eye icon on the top-right corner to see your website in live preview mode.

By following these steps, you should be able to align the box where the website inputs their phone number flush with the "Download Now" button in Webflow.

Additional Questions:

  1. How do I align elements horizontally in Webflow?
  2. What are the different positioning options available in Webflow?
  3. How can I adjust the spacing between elements in Webflow?