Can I place text position in a % in Webflow?Can the Phone Landscape & Phone Portrait resolutions stick like the tablet does in Webflow?

Published on
September 23, 2023

Can I place text position in a % in Webflow?

Yes, you can position text using percentage values in Webflow. By default, Webflow uses the 'px' (pixels) unit for measurements, but you can easily switch to using percentages by adjusting the measurement unit for the element's position settings.

Here's how you can position text using percentages in Webflow:

  1. Select the text element you want to position.
  2. In the right-hand sidebar, go to the Styles panel.
  3. Under the Position section, you'll find options for Top, Right, Bottom, and Left positions.
  4. By default, the measurement unit is set to 'px'. To change this to percentage, you can simply type in the value followed by the '%' symbol. For example: 50%.

Using percentages for text position can be especially useful when you want to create responsive designs that scale well across different screen sizes. With percentages, elements will resize proportionally relative to their parent container.

Keep in mind that when using percentage values for positioning, you need to consider the dimensions of the parent container. If the parent container's dimensions are also in percentages, the text's position will be calculated relative to its size.

Can the Phone Landscape & Phone Portrait resolutions stick like the tablet does in Webflow?

In Webflow, the "Sticky" position is not supported for Phone Landscape and Phone Portrait resolutions by default. However, you can achieve a similar effect by using interaction triggers and animations.

Here's how you can make elements stick in Phone Landscape & Phone Portrait resolutions in Webflow:

  1. Select the element you want to stick in the Phone Landscape or Phone Portrait layout.
  2. In the right-hand sidebar, go to the Interactions panel.
  3. Click on the "+" button to create a new interaction.
  4. Select an interaction trigger, such as "While page is scrolling" or "While page is scrolling in view".
  5. Choose an animation type that suits your needs, such as "Move" or "Opacity".
  6. Set the animation options to achieve the desired sticking effect. For example, you can animate the element's position to "Fixed" or change its opacity.

By using interactions and animations, you can create the illusion of elements sticking in the Phone Landscape and Phone Portrait layouts. However, keep in mind that this approach requires some additional work compared to the built-in sticky position property for Tablet resolutions.

Additional Questions:

  1. How can I center-align text in Webflow?
  2. Can I create custom animations in Webflow?
  3. What are the benefits of using Webflow for web design?